@atlaskit/editor-common/dist/cjs/floating-toolbar/DropdownMenuExtensionItems.js

A package that contains common classes and components for editor and renderer

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DropdownMenuExtensionItems = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _react = _interopRequireWildcard(require("react"));
var _reactLoadable = _interopRequireDefault(require("react-loadable"));
var _extensions = require("../extensions");
var _utils = require("../utils");
var _DropdownMenuItem = require("./DropdownMenuItem");
var _DropdownSeparator = require("./DropdownSeparator");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var noop = function noop() {
  return null;
};
var isDefaultExport = function isDefaultExport(mod) {
  return mod.hasOwnProperty('default');
};
var resolveExtensionIcon = /*#__PURE__*/function () {
  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(getIcon) {
    var maybeIcon;
    return _regenerator.default.wrap(function _callee$(_context) {
      while (1) switch (_context.prev = _context.next) {
        case 0:
          if (getIcon) {
            _context.next = 2;
            break;
          }
          return _context.abrupt("return", noop);
        case 2:
          _context.next = 4;
          return getIcon();
        case 4:
          maybeIcon = _context.sent;
          return _context.abrupt("return", isDefaultExport(maybeIcon) ? maybeIcon.default : maybeIcon);
        case 6:
        case "end":
          return _context.stop();
      }
    }, _callee);
  }));
  return function resolveExtensionIcon(_x) {
    return _ref.apply(this, arguments);
  };
}();
var convertExtensionToDropdownMenuItem = function convertExtensionToDropdownMenuItem(_ref2) {
  var item = _ref2.item,
    disabled = _ref2.disabled,
    node = _ref2.node,
    extension = _ref2.extension,
    IconComponent = _ref2.IconComponent;
  var title = '';
  if (item.label) {
    title = item.label;
  } else if (typeof item.tooltip === 'string') {
    title = item.tooltip;
  } else if (item.ariaLabel) {
    title = item.ariaLabel;
  }
  item.disabled = (disabled === null || disabled === void 0 ? void 0 : disabled(item.key)) || false;
  var getIcon = function getIcon() {
    var label = item.label || '';
    return IconComponent ? /*#__PURE__*/_react.default.createElement(IconComponent, {
      label: label
    }) : undefined;
  };
  return {
    title: title,
    icon: getIcon(),
    disabled: item.disabled,
    onClick: function onClick() {
      if (typeof item.action !== 'function') {
        throw new Error("'action' of context toolbar item '".concat(item.key, "' is not a function"));
      }
      var targetNodeAdf = (0, _utils.nodeToJSON)(node);
      extension.extensionApi && item.action(targetNodeAdf, extension.extensionApi);
      return true;
    }
  };
};
var DropdownMenuExtensionItem = function DropdownMenuExtensionItem(_ref3) {
  var item = _ref3.item,
    editorView = _ref3.editorView,
    disabled = _ref3.disabled,
    node = _ref3.node,
    extension = _ref3.extension,
    dropdownOptions = _ref3.dropdownOptions;
  // Use ref to keep icon component stable across renders
  var iconRef = (0, _react.useRef)(null);
  if (!iconRef.current && item.icon) {
    iconRef.current = (0, _reactLoadable.default)({
      loader: function loader() {
        return resolveExtensionIcon(item.icon);
      },
      loading: noop
    });
  }
  var dropdownItem = convertExtensionToDropdownMenuItem({
    item: item,
    disabled: disabled,
    node: node,
    extension: extension,
    IconComponent: iconRef.current
  });
  if (!dropdownItem) {
    return null;
  }
  return /*#__PURE__*/_react.default.createElement(_DropdownMenuItem.DropdownMenuItem, {
    key: item.key,
    item: dropdownItem,
    editorView: editorView,
    hide: dropdownOptions.hide,
    dispatchCommand: dropdownOptions.dispatchCommand,
    showSelected: dropdownOptions.showSelected,
    intl: dropdownOptions.intl
  });
};
var DropdownMenuExtensionItems = exports.DropdownMenuExtensionItems = function DropdownMenuExtensionItems(props) {
  var node = props.node,
    editorView = props.editorView,
    extension = props.extension,
    disabled = props.disabled,
    dropdownOptions = props.dropdownOptions,
    areAnyNewToolbarFlagsEnabled = props.areAnyNewToolbarFlagsEnabled;

  // Ignored via go/ees005
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  var _useState = (0, _react.useState)([]),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    extensions = _useState2[0],
    setExtensions = _useState2[1];
  (0, _react.useEffect)(function () {
    getExtensions();
    function getExtensions() {
      return _getExtensions.apply(this, arguments);
    }
    function _getExtensions() {
      _getExtensions = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
        var provider;
        return _regenerator.default.wrap(function _callee2$(_context2) {
          while (1) switch (_context2.prev = _context2.next) {
            case 0:
              _context2.next = 2;
              return extension.extensionProvider;
            case 2:
              provider = _context2.sent;
              if (!provider) {
                _context2.next = 9;
                break;
              }
              _context2.t0 = setExtensions;
              _context2.next = 7;
              return provider.getExtensions();
            case 7:
              _context2.t1 = _context2.sent;
              (0, _context2.t0)(_context2.t1);
            case 9:
            case "end":
              return _context2.stop();
          }
        }, _callee2);
      }));
      return _getExtensions.apply(this, arguments);
    }
  }, [extension.extensionProvider]);
  var nodeAdf = _react.default.useMemo(function () {
    return (0, _utils.nodeToJSON)(node);
  }, [node]);
  var extensionItems = _react.default.useMemo(function () {
    if (!extension.extensionApi) {
      return [];
    }
    return (0, _extensions.getContextualToolbarItemsFromModule)(extensions, nodeAdf, extension.extensionApi);
  }, [extensions, nodeAdf, extension.extensionApi]);
  if (!extensionItems.length || !dropdownOptions) {
    return null;
  }
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, extensionItems.map(function (item, _idx) {
    if (!('key' in item)) {
      return null;
    }
    return /*#__PURE__*/_react.default.createElement(DropdownMenuExtensionItem, {
      key: item.key,
      item: item,
      editorView: editorView,
      disabled: disabled,
      node: node,
      extension: extension,
      dropdownOptions: dropdownOptions
    });
  }), areAnyNewToolbarFlagsEnabled && /*#__PURE__*/_react.default.createElement(_DropdownSeparator.DropdownSeparator, null));
};