@atlaskit/editor-plugin-card 0.1.0

package/dist/esm/ui/EditorSmartCardEvents.js

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+import { useSmartLinkEvents } from '@atlaskit/smart-card';
+import { registerSmartCardEvents } from '../pm-plugins/actions';
+export var EditorSmartCardEvents = function EditorSmartCardEvents(_ref) {
+  var editorView = _ref.editorView;
+  var events = useSmartLinkEvents();
+  useEffect(function () {
+    if (!events) {
+      return;
+    }
+    editorView.dispatch(registerSmartCardEvents(events)(editorView.state.tr));
+  }, [events, editorView]);
+  return null;
+};

package/dist/esm/ui/EditorSmartCardEventsNext.js

@@ -0,0 +1,203 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+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";
+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() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+import React, { useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { AnalyticsContext, UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { ACTION, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { getAnalyticsEditorAppearance } from '@atlaskit/editor-common/utils';
+import { useSmartLinkLifecycleAnalytics } from '@atlaskit/link-analytics';
+import { registerSmartCardEventsNext } from '../pm-plugins/actions';
+import { getPluginState } from '../pm-plugins/util/state';
+/**
+ * If the metadata is for a history event,
+ * returns undo/redo instead of instead of what fn(metadata) would have otherwise
+ * returned
+ */
+var withHistoryMethod = function withHistoryMethod(fn) {
+  return function (metadata) {
+    var isUndo = metadata.isUndo,
+      isRedo = metadata.isRedo;
+    if (isUndo) {
+      return 'undo';
+    }
+    if (isRedo) {
+      return 'redo';
+    }
+    return fn(metadata);
+  };
+};
+var getMethod = withHistoryMethod(function (_ref) {
+  var inputMethod = _ref.inputMethod;
+  switch (inputMethod) {
+    case INPUT_METHOD.CLIPBOARD:
+      return 'editor_paste';
+    case INPUT_METHOD.FLOATING_TB:
+      return 'editor_floatingToolbar';
+    case INPUT_METHOD.AUTO_DETECT:
+    case INPUT_METHOD.FORMATTING:
+      return 'editor_type';
+    default:
+      return 'unknown';
+  }
+});
+var getUpdateType = withHistoryMethod(function (_ref2) {
+  var action = _ref2.action;
+  switch (action) {
+    case ACTION.CHANGED_TYPE:
+      return 'display_update';
+    case ACTION.UPDATED:
+      return 'link_update';
+    default:
+      return 'unknown';
+  }
+});
+var getDeleteType = withHistoryMethod(function (_ref3) {
+  var action = _ref3.action;
+  if (action === ACTION.UNLINK) {
+    return 'unlink';
+  }
+  return 'delete';
+});
+var getSourceEventFromMetadata = function getSourceEventFromMetadata(metadata) {
+  return metadata.sourceEvent instanceof UIAnalyticsEvent ? metadata.sourceEvent : null;
+};
+
+/**
+ * Set display category as `link` if not displaying the link as a smart card
+ */
+var displayCategoryFromDisplay = function displayCategoryFromDisplay(display) {
+  if (display === 'url') {
+    return 'link';
+  }
+};
+
+/**
+ * Binds the @atlaskit/link-analytics callbacks
+ * to the editor card plugin state events callbacks interfaces
+ */
+export var EventsBinding = function EventsBinding(_ref4) {
+  var editorView = _ref4.editorView;
+  /**
+   * These callbacks internally use window.requestIdleCallback/requestAnimationFrame
+   * to defer any heavy operations involving network
+   *
+   * The callbacks themselves should not be deferred, they should be called syncronously the moment
+   * the events take place.
+   */
+  var _useSmartLinkLifecycl = useSmartLinkLifecycleAnalytics(),
+    linkCreated = _useSmartLinkLifecycl.linkCreated,
+    linkUpdated = _useSmartLinkLifecycl.linkUpdated,
+    linkDeleted = _useSmartLinkLifecycl.linkDeleted;
+  var events = useMemo(function () {
+    return {
+      created: function created(metadata) {
+        var url = metadata.url,
+          display = metadata.display,
+          nodeContext = metadata.nodeContext;
+        var displayCategory = displayCategoryFromDisplay(display);
+        var sourceEvent = getSourceEventFromMetadata(metadata);
+        var creationMethod = getMethod(metadata);
+        linkCreated({
+          url: url,
+          displayCategory: displayCategory
+        }, sourceEvent, {
+          display: display,
+          nodeContext: nodeContext,
+          creationMethod: creationMethod
+        });
+      },
+      updated: function updated(metadata) {
+        var url = metadata.url,
+          display = metadata.display,
+          previousDisplay = metadata.previousDisplay,
+          nodeContext = metadata.nodeContext;
+        var displayCategory = displayCategoryFromDisplay(display);
+        var sourceEvent = getSourceEventFromMetadata(metadata);
+        var updateMethod = getMethod(metadata);
+        var updateType = getUpdateType(metadata);
+        linkUpdated({
+          url: url,
+          displayCategory: displayCategory
+        }, sourceEvent, {
+          display: display,
+          previousDisplay: previousDisplay,
+          nodeContext: nodeContext,
+          updateMethod: updateMethod,
+          updateType: updateType
+        });
+      },
+      deleted: function deleted(metadata) {
+        var url = metadata.url,
+          display = metadata.display,
+          nodeContext = metadata.nodeContext;
+        var displayCategory = displayCategoryFromDisplay(display);
+        var sourceEvent = getSourceEventFromMetadata(metadata);
+        var deleteMethod = getMethod(metadata);
+        var deleteType = getDeleteType(metadata);
+        linkDeleted({
+          url: url,
+          displayCategory: displayCategory
+        }, sourceEvent, {
+          display: display,
+          nodeContext: nodeContext,
+          deleteMethod: deleteMethod,
+          deleteType: deleteType
+        });
+      }
+    };
+  }, [linkCreated, linkUpdated, linkDeleted]);
+  useEffect(function () {
+    editorView.dispatch(registerSmartCardEventsNext(events)(editorView.state.tr));
+  }, [events, editorView]);
+  return null;
+};
+
+// eslint-disable-next-line @repo/internal/react/no-class-components
+export var EditorSmartCardEventsNext = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(EditorSmartCardEventsNext, _React$PureComponent);
+  var _super = _createSuper(EditorSmartCardEventsNext);
+  function EditorSmartCardEventsNext() {
+    _classCallCheck(this, EditorSmartCardEventsNext);
+    return _super.apply(this, arguments);
+  }
+  _createClass(EditorSmartCardEventsNext, [{
+    key: "render",
+    value: function render() {
+      var _getPluginState;
+      var cardContext = this.context.contextAdapter.card;
+
+      /**
+       * The analytics hook needs to be able to communicate with the card context
+       * If we can't access it, don't mount the event bindings
+       * This effectively entirely disables all tracking behaviour
+       */
+      if (!cardContext) {
+        return null;
+      }
+      var editorAppearance = (_getPluginState = getPluginState(this.props.editorView.state)) === null || _getPluginState === void 0 ? void 0 : _getPluginState.editorAppearance;
+      var analyticsEditorAppearance = getAnalyticsEditorAppearance(editorAppearance);
+      var analyticsData = {
+        attributes: {
+          location: analyticsEditorAppearance
+        },
+        // Below is added for the future implementation of Linking Platform namespaced analytic context
+        location: analyticsEditorAppearance
+      };
+      return /*#__PURE__*/React.createElement(cardContext.Provider, {
+        value: cardContext.value
+      }, /*#__PURE__*/React.createElement(AnalyticsContext, {
+        data: analyticsData
+      }, /*#__PURE__*/React.createElement(EventsBinding, this.props)));
+    }
+  }]);
+  return EditorSmartCardEventsNext;
+}(React.PureComponent);
+_defineProperty(EditorSmartCardEventsNext, "contextTypes", {
+  contextAdapter: PropTypes.object
+});

package/dist/esm/ui/HyperlinkToolbarAppearance.js

@@ -0,0 +1,163 @@
+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";
+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";
+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() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+import React, { Component } from 'react';
+import { LinkToolbarAppearance } from './LinkToolbarAppearance';
+// 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 _this;
+    _classCallCheck(this, HyperlinkToolbarAppearance);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      supportedUrlsMap: new Map()
+    });
+    _defineProperty(_assertThisInitialized(_this), "getProvider", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (!_this.cardProvider) {
+              _context2.next = 2;
+              break;
+            }
+            return _context2.abrupt("return", _this.cardProvider);
+          case 2:
+            return _context2.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) {
+                      case 0:
+                        if (cardProvider) {
+                          _context.next = 2;
+                          break;
+                        }
+                        return _context.abrupt("return");
+                      case 2:
+                        _context.next = 4;
+                        return cardProvider;
+                      case 4:
+                        _this.cardProvider = _context.sent;
+                        resolve(_this.cardProvider);
+                      case 6:
+                      case "end":
+                        return _context.stop();
+                    }
+                  }, _callee);
+                }));
+                return function (_x, _x2) {
+                  return _ref2.apply(this, arguments);
+                };
+              }());
+            }));
+          case 3:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    })));
+    _defineProperty(_assertThisInitialized(_this), "resolveUrl", /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(url) {
+        var supportedUrlsMap, isUrlSupported, provider;
+        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              supportedUrlsMap = _this.state.supportedUrlsMap;
+              if (!supportedUrlsMap.has(url)) {
+                _context3.next = 3;
+                break;
+              }
+              return _context3.abrupt("return");
+            case 3:
+              isUrlSupported = false;
+              _context3.prev = 4;
+              _context3.next = 7;
+              return _this.getProvider();
+            case 7:
+              provider = _context3.sent;
+              _context3.next = 10;
+              return provider.findPattern(url);
+            case 10:
+              isUrlSupported = _context3.sent;
+              _context3.next = 16;
+              break;
+            case 13:
+              _context3.prev = 13;
+              _context3.t0 = _context3["catch"](4);
+              isUrlSupported = false;
+            case 16:
+              supportedUrlsMap.set(url, isUrlSupported);
+              _this.setState({
+                supportedUrlsMap: supportedUrlsMap
+              });
+            case 18:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3, null, [[4, 13]]);
+      }));
+      return function (_x3) {
+        return _ref3.apply(this, arguments);
+      };
+    }());
+    _defineProperty(_assertThisInitialized(_this), "componentDidMount", function () {
+      return _this.resolveUrl(_this.props.url);
+    });
+    return _this;
+  }
+  _createClass(HyperlinkToolbarAppearance, [{
+    key: "UNSAFE_componentWillReceiveProps",
+    value:
+    // needed so we display the right state on the Toolbar while the same Toolbar
+    // instance is visible and we click other link
+    function UNSAFE_componentWillReceiveProps(nextProps) {
+      if (nextProps.url !== this.props.url) {
+        this.resolveUrl(nextProps.url);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        url = _this$props.url,
+        intl = _this$props.intl,
+        editorView = _this$props.editorView,
+        editorState = _this$props.editorState,
+        cardOptions = _this$props.cardOptions,
+        platform = _this$props.platform,
+        editorAnalyticsApi = _this$props.editorAnalyticsApi,
+        cardActions = _this$props.cardActions;
+      var supportedUrlsMap = this.state.supportedUrlsMap;
+      if (!supportedUrlsMap.get(url)) {
+        return null;
+      }
+      return /*#__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,
+        cardActions: cardActions
+      });
+    }
+  }]);
+  return HyperlinkToolbarAppearance;
+}(Component);

package/dist/esm/ui/LayoutButton/index.js

@@ -0,0 +1,110 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+/** @jsx jsx */
+import React, { useCallback, useMemo } from 'react';
+import { css, jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { Popup } from '@atlaskit/editor-common/ui';
+import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import { getNextBreakoutMode, getTitle } from '@atlaskit/editor-common/utils';
+import CollapseIcon from '@atlaskit/icon/glyph/editor/collapse';
+import ExpandIcon from '@atlaskit/icon/glyph/editor/expand';
+import { B300, N20A, N300 } from '@atlaskit/theme/colors';
+import { setCardLayout } from '../../pm-plugins/actions';
+import { getDatasource } from './utils';
+var toolbarButtonWrapperStyles = css({
+  background: "".concat("var(--ds-background-neutral, ".concat(N20A, ")")),
+  color: "".concat("var(--ds-icon, ".concat(N300, ")")),
+  ':hover': {
+    background: "".concat("var(--ds-background-neutral-hovered, ".concat(B300, ")")),
+    color: "var(--ds-icon, white)".concat(" !important")
+  }
+});
+export var LayoutButton = function LayoutButton(_ref) {
+  var onLayoutChange = _ref.onLayoutChange,
+    _ref$layout = _ref.layout,
+    layout = _ref$layout === void 0 ? 'center' : _ref$layout,
+    formatMessage = _ref.intl.formatMessage,
+    mountPoint = _ref.mountPoint,
+    boundariesElement = _ref.boundariesElement,
+    scrollableElement = _ref.scrollableElement,
+    targetElement = _ref.targetElement,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'datasource-table-layout-button' : _ref$testId;
+  var handleClick = useCallback(function () {
+    onLayoutChange && onLayoutChange(getNextBreakoutMode(layout));
+  }, [layout, onLayoutChange]);
+  var title = useMemo(function () {
+    return formatMessage(getTitle(layout));
+  }, [formatMessage, layout]);
+  if (!targetElement) {
+    return null;
+  }
+  return jsx(Popup, {
+    mountTo: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement,
+    target: targetElement,
+    alignY: "start",
+    alignX: "end",
+    forcePlacement: true,
+    stick: true,
+    ariaLabel: title
+  }, jsx(ToolbarButton, {
+    testId: testId,
+    css: toolbarButtonWrapperStyles,
+    title: title,
+    onClick: handleClick,
+    iconBefore: layout === 'full-width' ? jsx(CollapseIcon, {
+      label: title
+    }) : jsx(ExpandIcon, {
+      label: title
+    })
+  }));
+};
+var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
+  var _node$attrs, _node$attrs2;
+  var editorView = _ref2.editorView,
+    mountPoint = _ref2.mountPoint,
+    scrollableElement = _ref2.scrollableElement,
+    boundariesElement = _ref2.boundariesElement,
+    intl = _ref2.intl,
+    api = _ref2.api;
+  var _useSharedPluginState = useSharedPluginState(api, ['card']),
+    cardState = _useSharedPluginState.cardState;
+  var _getDatasource = getDatasource(editorView),
+    node = _getDatasource.node,
+    pos = _getDatasource.pos;
+  var _ref3 = cardState !== null && cardState !== void 0 ? cardState : {},
+    datasourceTableRef = _ref3.datasourceTableRef,
+    _ref3$layout = _ref3.layout,
+    layout = _ref3$layout === void 0 ? (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.layout) || 'center' : _ref3$layout;
+  var isDatasource = !!(node !== null && node !== void 0 && (_node$attrs2 = node.attrs) !== null && _node$attrs2 !== void 0 && _node$attrs2.datasource);
+  var onLayoutChange = function onLayoutChange(layout) {
+    if (pos === undefined) {
+      return;
+    }
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    var tr = state.tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node === null || node === void 0 ? void 0 : node.attrs), {}, {
+      layout: layout
+    }));
+    tr.setMeta('scrollIntoView', false);
+    dispatch(setCardLayout(layout)(tr));
+  };
+  if (!isDatasource) {
+    return null;
+  }
+  return jsx(LayoutButton, {
+    mountPoint: mountPoint,
+    scrollableElement: scrollableElement,
+    boundariesElement: boundariesElement,
+    targetElement: datasourceTableRef,
+    layout: layout,
+    onLayoutChange: onLayoutChange,
+    intl: intl
+  });
+};
+export default injectIntl(LayoutButtonWrapper);

package/dist/esm/ui/LayoutButton/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/ui/LayoutButton/utils.js

@@ -0,0 +1,12 @@
+import { findSelectedNodeOfType } from 'prosemirror-utils';
+export var getDatasource = function getDatasource(editorView) {
+  var _findSelectedNodeOfTy;
+  var _editorView$state = editorView.state,
+    selection = _editorView$state.selection,
+    schema = _editorView$state.schema;
+  var blockCard = schema.nodes.blockCard;
+  return (_findSelectedNodeOfTy = findSelectedNodeOfType([blockCard])(selection)) !== null && _findSelectedNodeOfTy !== void 0 ? _findSelectedNodeOfTy : {
+    node: undefined,
+    pos: undefined
+  };
+};

package/dist/esm/ui/LinkToolbarAppearance.js

@@ -0,0 +1,141 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+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";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Fragment } from 'prosemirror-model';
+import { ACTION, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { commandWithMetadata, getButtonGroupOption, LinkToolbarButtonGroup } from '@atlaskit/editor-common/card';
+import nodeNames, { cardMessages as messages } from '@atlaskit/editor-common/messages';
+import { isSupportedInParent } from '@atlaskit/editor-common/utils';
+// eslint-disable-next-line @repo/internal/react/no-class-components
+export var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
+  _inherits(LinkToolbarAppearance, _React$Component);
+  var _super = _createSuper(LinkToolbarAppearance);
+  function LinkToolbarAppearance() {
+    var _this;
+    _classCallCheck(this, LinkToolbarAppearance);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "renderDropdown", function (view, cardContext) {
+      var _cardActions$setSelec, _cardActions$setSelec2, _cardActions$changeSe, _cardActions$setSelec3;
+      var _this$props = _this.props,
+        url = _this$props.url,
+        intl = _this$props.intl,
+        currentAppearance = _this$props.currentAppearance,
+        editorState = _this$props.editorState,
+        allowEmbeds = _this$props.allowEmbeds,
+        _this$props$allowBloc = _this$props.allowBlockCards,
+        allowBlockCards = _this$props$allowBloc === void 0 ? true : _this$props$allowBloc,
+        platform = _this$props.platform,
+        editorAnalyticsApi = _this$props.editorAnalyticsApi,
+        cardActions = _this$props.cardActions;
+      var preview = allowEmbeds && cardContext && url && cardContext.extractors.getPreview(url, platform);
+      var defaultCommand = function defaultCommand() {
+        return false;
+      };
+      if (url) {
+        var _cardContext$store, _urlState$error;
+        var urlState = cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$store = cardContext.store) === null || _cardContext$store === void 0 ? void 0 : _cardContext$store.getState()[url];
+        if ((urlState === null || urlState === void 0 ? void 0 : (_urlState$error = urlState.error) === null || _urlState$error === void 0 ? void 0 : _urlState$error.kind) === 'fatal') {
+          return null;
+        }
+      }
+      var isBlockCardLinkSupportedInParent = allowBlockCards ? isSupportedInParent(editorState, Fragment.from(editorState.schema.nodes.blockCard.createChecked({})), currentAppearance) : false;
+      var isEmbedCardLinkSupportedInParent = allowEmbeds ? isSupportedInParent(editorState, Fragment.from(editorState.schema.nodes.embedCard.createChecked({})), currentAppearance) : false;
+      var embedOption = allowEmbeds && preview && {
+        appearance: 'embed',
+        title: intl.formatMessage(messages.embed),
+        onClick: (_cardActions$setSelec = cardActions === null || cardActions === void 0 ? void 0 : cardActions.setSelectedCardAppearance('embed', editorAnalyticsApi)) !== null && _cardActions$setSelec !== void 0 ? _cardActions$setSelec : defaultCommand,
+        selected: currentAppearance === 'embed',
+        hidden: false,
+        testId: 'embed-appearance',
+        disabled: !isEmbedCardLinkSupportedInParent,
+        tooltip: isEmbedCardLinkSupportedInParent ? undefined : getUnavailableMessage(editorState, intl)
+      };
+      var blockCardOption = allowBlockCards && {
+        appearance: 'block',
+        title: intl.formatMessage(messages.block),
+        onClick: (_cardActions$setSelec2 = cardActions === null || cardActions === void 0 ? void 0 : cardActions.setSelectedCardAppearance('block', editorAnalyticsApi)) !== null && _cardActions$setSelec2 !== void 0 ? _cardActions$setSelec2 : defaultCommand,
+        selected: currentAppearance === 'block',
+        testId: 'block-appearance',
+        disabled: !isBlockCardLinkSupportedInParent,
+        tooltip: isBlockCardLinkSupportedInParent ? undefined : getUnavailableMessage(editorState, intl)
+      };
+      var options = [{
+        title: intl.formatMessage(messages.url),
+        onClick: commandWithMetadata((_cardActions$changeSe = cardActions === null || cardActions === void 0 ? void 0 : cardActions.changeSelectedCardToLink(url, url, true, undefined, undefined, editorAnalyticsApi)) !== null && _cardActions$changeSe !== void 0 ? _cardActions$changeSe : defaultCommand, {
+          action: ACTION.CHANGED_TYPE
+        }),
+        selected: !currentAppearance,
+        testId: 'url-appearance'
+      }, {
+        appearance: 'inline',
+        title: intl.formatMessage(messages.inline),
+        onClick: (_cardActions$setSelec3 = cardActions === null || cardActions === void 0 ? void 0 : cardActions.setSelectedCardAppearance('inline', editorAnalyticsApi)) !== null && _cardActions$setSelec3 !== void 0 ? _cardActions$setSelec3 : defaultCommand,
+        selected: currentAppearance === 'inline',
+        testId: 'inline-appearance'
+      }];
+      var dispatchCommand = function dispatchCommand(fn) {
+        fn && fn(editorState, view && view.dispatch);
+        // Refocus the view to ensure the editor has focus
+        if (view && !view.hasFocus()) {
+          view.focus();
+        }
+      };
+      if (blockCardOption) {
+        options.push(blockCardOption);
+      }
+      if (embedOption) {
+        options.push(embedOption);
+      }
+      return /*#__PURE__*/React.createElement(LinkToolbarButtonGroup, {
+        key: "link-toolbar-button-group",
+        options: options.map(function (option) {
+          return getButtonGroupOption(intl, dispatchCommand, _objectSpread(_objectSpread({}, option), {}, {
+            onClick: commandWithMetadata(option.onClick, {
+              inputMethod: INPUT_METHOD.FLOATING_TB
+            })
+          }));
+        })
+      });
+    });
+    return _this;
+  }
+  _createClass(LinkToolbarAppearance, [{
+    key: "render",
+    value: function render() {
+      var cardContext = this.context.contextAdapter ? this.context.contextAdapter.card : undefined;
+      var editorView = this.props.editorView;
+      return this.renderDropdown(editorView, cardContext && cardContext.value);
+    }
+  }]);
+  return LinkToolbarAppearance;
+}(React.Component);
+_defineProperty(LinkToolbarAppearance, "contextTypes", {
+  contextAdapter: PropTypes.object
+});
+var getUnavailableMessage = function getUnavailableMessage(state, intl) {
+  try {
+    var parentNode = state.selection.$from.node(1);
+    var parentName = intl.formatMessage(nodeNames[parentNode.type.name]);
+    var tooltip = intl.formatMessage(messages.displayOptionUnavailableInParentNode, {
+      node: parentName
+    });
+    return tooltip;
+  } catch (e) {
+    return intl.formatMessage(messages.displayOptionUnavailableInParentNode, {
+      node: intl.formatMessage(nodeNames.defaultBlockNode)
+    });
+  }
+};