@atlaskit/editor-common 102.10.4 → 102.11.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-common
 
+## 102.11.1
+
+### Patch Changes
+
+- [#128991](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/128991)
+  [`c24ae5545b4ba`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c24ae5545b4ba) -
+  Fix bug where requestDocument was throttling at a module level rather than per editor - this was
+  causing issues in products that use multiple editors at the same time.
+- Updated dependencies
+
+## 102.11.0
+
+### Minor Changes
+
+- [#127253](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/127253)
+  [`a2593d5c73ccb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a2593d5c73ccb) -
+  [ux] Table overflow menu on floating toolbar
+
 ## 102.10.4
 
 ### Patch Changes

package/dist/cjs/floating-toolbar/DropdownMenuExtensionItems.js

@@ -0,0 +1,203 @@
+"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");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+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 && {}.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; }
+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;
+  var ButtonIcon = item.icon ? (0, _reactLoadable.default)({
+    // Ignored via go/ees005
+    // eslint-disable-next-line require-await
+    loader: function () {
+      var _loader = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+        return _regenerator.default.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              return _context2.abrupt("return", resolveExtensionIcon(item.icon));
+            case 1:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      function loader() {
+        return _loader.apply(this, arguments);
+      }
+      return loader;
+    }(),
+    loading: noop
+  }) : undefined;
+  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;
+  return {
+    title: title,
+    icon: ButtonIcon ? /*#__PURE__*/_react.default.createElement(ButtonIcon, {
+      label: item.label || ''
+    }) : undefined,
+    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;
+  var dropdownItem = convertExtensionToDropdownMenuItem({
+    item: item,
+    disabled: disabled,
+    node: node,
+    extension: extension
+  });
+  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;
+
+  // 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 _callee3() {
+        var provider;
+        return _regenerator.default.wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              _context3.next = 2;
+              return extension.extensionProvider;
+            case 2:
+              provider = _context3.sent;
+              if (!provider) {
+                _context3.next = 9;
+                break;
+              }
+              _context3.t0 = setExtensions;
+              _context3.next = 7;
+              return provider.getExtensions();
+            case 7:
+              _context3.t1 = _context3.sent;
+              (0, _context3.t0)(_context3.t1);
+            case 9:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3);
+      }));
+      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
+    });
+  }));
+};

package/dist/cjs/floating-toolbar/DropdownMenuItem.js

@@ -0,0 +1,203 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.menuItemDimensions = exports.DropdownMenuItem = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _checkMarkEditorDone = _interopRequireDefault(require("@atlaskit/icon/core/migration/check-mark--editor-done"));
+var _menu = require("@atlaskit/menu");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _floatingToolbar = require("../floating-toolbar");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+
+var menuItemDimensions = exports.menuItemDimensions = {
+  width: 175,
+  height: 32
+};
+var labelStyles = (0, _react2.css)({
+  display: 'inline-block',
+  width: '100%'
+});
+var spacerStyles = (0, _react2.css)({
+  display: 'flex',
+  flex: 1,
+  padding: "var(--ds-space-100, 8px)"
+});
+
+// Extend the ButtonItem component type to allow mouse events to be accepted from the Typescript check
+
+var DropdownButtonItem = _menu.ButtonItem;
+var SelectedIconBefore = function SelectedIconBefore(_ref) {
+  var itemSelected = _ref.itemSelected,
+    intl = _ref.intl,
+    showSelected = _ref.showSelected;
+  if (showSelected && itemSelected) {
+    return (0, _react2.jsx)("span", {
+      "aria-hidden": "true"
+    }, (0, _react2.jsx)(_checkMarkEditorDone.default, {
+      LEGACY_primaryColor: "var(--ds-icon-selected, #0C66E4)",
+      LEGACY_size: "small",
+      label: intl.formatMessage(_floatingToolbar.messages.confirmModalOK),
+      spacing: "none"
+    }));
+  }
+  return (0, _react2.jsx)("span", {
+    css: spacerStyles
+  });
+};
+var DropdownMenuItem = exports.DropdownMenuItem = function DropdownMenuItem(props) {
+  var item = props.item,
+    hide = props.hide,
+    dispatchCommand = props.dispatchCommand,
+    editorView = props.editorView,
+    showSelected = props.showSelected,
+    intl = props.intl;
+  var itemSelected = item.selected;
+  var iconBefore = (0, _react.useMemo)(function () {
+    if (item.icon) {
+      return item.icon;
+    } else {
+      return (0, _react2.jsx)(SelectedIconBefore, {
+        itemSelected: itemSelected,
+        showSelected: showSelected,
+        intl: intl
+      });
+    }
+  }, [itemSelected, showSelected, intl, item.icon]);
+  var _useState = (0, _react.useState)(item.tooltip || ''),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    tooltipContent = _useState2[0],
+    setTooltipContent = _useState2[1];
+  var handleItemMouseOut = (0, _react.useCallback)(function () {
+    setTooltipContent('');
+    if (item.onMouseOut) {
+      dispatchCommand(item.onMouseOut);
+    }
+  }, [item.onMouseOut, dispatchCommand]);
+  var handleItemMouseDown = (0, _react.useCallback)(function (e) {
+    e.preventDefault(); // ED-16204 - This is needed for safari to get handleItemClick() to work
+    if (item.onMouseDown) {
+      dispatchCommand(item.onMouseDown);
+    }
+  }, [item.onMouseDown, dispatchCommand]);
+  var handleItemMouseOver = (0, _react.useCallback)(function () {
+    setTooltipContent(item.tooltip || '');
+    if (item.onMouseOver) {
+      dispatchCommand(item.onMouseOver);
+    }
+  }, [item.tooltip, item.onMouseOver, dispatchCommand]);
+  var handleItemMouseEnter = (0, _react.useCallback)(function (e) {
+    if (item.onMouseEnter) {
+      e.preventDefault();
+      dispatchCommand(item.onMouseEnter);
+    }
+  }, [item.onMouseEnter, dispatchCommand]);
+  var handleItemMouseLeave = (0, _react.useCallback)(function (e) {
+    if (item.onMouseLeave) {
+      e.preventDefault();
+      dispatchCommand(item.onMouseLeave);
+    }
+  }, [item.onMouseLeave, dispatchCommand]);
+  var handleItemOnFocus = (0, _react.useCallback)(function (e) {
+    if (item.onFocus) {
+      e.preventDefault();
+      dispatchCommand(item.onFocus);
+    }
+  }, [item.onFocus, dispatchCommand]);
+  var handleItemOnBlur = (0, _react.useCallback)(function (e) {
+    if (item.onBlur) {
+      e.preventDefault();
+      dispatchCommand(item.onBlur);
+    }
+  }, [item.onBlur, dispatchCommand]);
+  var handleItemClick = (0, _react.useCallback)(function () {
+    /**
+     * The order of dispatching the event and hide() is important, because
+     * the ClickAreaBlock will be relying on the element to calculate the
+     * click coordinate.
+     * For more details, please visit the comment in this PR https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5328/edm-1321-set-selection-near-smart-link?link_source=email#chg-packages/editor/editor-core/src/plugins/floating-toolbar/ui/DropdownMenu.tsx
+     */
+    dispatchCommand(item.onClick);
+    hide();
+    if (!(editorView !== null && editorView !== void 0 && editorView.hasFocus())) {
+      editorView === null || editorView === void 0 || editorView.focus();
+    }
+  }, [dispatchCommand, item.onClick, hide, editorView]);
+
+  /* ED-16704 - Native mouse event handler to overcome firefox issue on disabled <button> - https://github.com/whatwg/html/issues/5886 */
+  var labelRef = (0, _react.useRef)(null);
+  var handleTitleWrapperMouseEvent = (0, _react.useCallback)(
+  // Ignored via go/ees005
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  function (e) {
+    if (item.disabled) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  }, [item.disabled]);
+
+  // Ignored via go/ees005
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  var isAriaChecked = function isAriaChecked(item) {
+    var selected = item.selected,
+      domItemOptions = item.domItemOptions;
+    return (domItemOptions === null || domItemOptions === void 0 ? void 0 : domItemOptions.type) === 'item-checkbox' ? selected : undefined;
+  };
+
+  // Ignored via go/ees005
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  var hasRole = function hasRole(item) {
+    var _item$domItemOptions;
+    return ((_item$domItemOptions = item.domItemOptions) === null || _item$domItemOptions === void 0 ? void 0 : _item$domItemOptions.type) === 'item-checkbox' ? 'menuitemcheckbox' : undefined;
+  };
+  (0, _react.useEffect)(function () {
+    var labelRefCurrent = labelRef.current;
+    // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+    labelRefCurrent === null || labelRefCurrent === void 0 || labelRefCurrent.addEventListener('click', handleTitleWrapperMouseEvent);
+    // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+    labelRefCurrent === null || labelRefCurrent === void 0 || labelRefCurrent.addEventListener('mousedown', handleTitleWrapperMouseEvent);
+    return function () {
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      labelRefCurrent === null || labelRefCurrent === void 0 || labelRefCurrent.removeEventListener('click', handleTitleWrapperMouseEvent);
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      labelRefCurrent === null || labelRefCurrent === void 0 || labelRefCurrent.removeEventListener('mousedown', handleTitleWrapperMouseEvent);
+    };
+  });
+  var itemContent = (0, _react2.jsx)(DropdownButtonItem, {
+    isSelected: itemSelected,
+    iconBefore: iconBefore,
+    iconAfter: item.elemAfter,
+    onClick: handleItemClick,
+    "data-testid": item.testId,
+    isDisabled: item.disabled,
+    onMouseDown: handleItemMouseDown,
+    onMouseOver: handleItemMouseOver,
+    onMouseEnter: handleItemMouseEnter,
+    onMouseLeave: handleItemMouseLeave,
+    onMouseOut: handleItemMouseOut,
+    onFocus: handleItemOnFocus,
+    onBlur: handleItemOnBlur,
+    role: hasRole(item),
+    "aria-checked": isAriaChecked(item)
+  }, (0, _react2.jsx)("span", {
+    ref: labelRef,
+    css: labelStyles
+  }, item.title));
+  if (tooltipContent) {
+    return (0, _react2.jsx)(_tooltip.default, {
+      content: tooltipContent
+    }, itemContent);
+  }
+  return itemContent;
+};

package/dist/cjs/floating-toolbar/index.js

@@ -4,6 +4,18 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "DropdownMenuExtensionItems", {
+  enumerable: true,
+  get: function get() {
+    return _DropdownMenuExtensionItems.DropdownMenuExtensionItems;
+  }
+});
+Object.defineProperty(exports, "DropdownMenuItem", {
+  enumerable: true,
+  get: function get() {
+    return _DropdownMenuItem.DropdownMenuItem;
+  }
+});
 exports.isSameItem = exports.compareArrays = exports.areSameItems = void 0;
 Object.defineProperty(exports, "messages", {
   enumerable: true,
@@ -12,6 +24,8 @@ Object.defineProperty(exports, "messages", {
   }
 });
 exports.shallowEqual = void 0;
+var _DropdownMenuExtensionItems = require("./DropdownMenuExtensionItems");
+var _DropdownMenuItem = require("./DropdownMenuItem");
 var _messages = _interopRequireDefault(require("./messages"));
 // Ignored via go/ees005
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -132,4 +146,4 @@ var areSameItems = exports.areSameItems = function areSameItems(leftArr, rightAr
   });
 };
 
-// eslint-disable-next-line @atlaskit/editor/no-re-export
+/* eslint-disable @atlaskit/editor/no-re-export */

package/dist/cjs/monitoring/error.js

@@ -17,7 +17,7 @@ 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 && {}.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; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "102.10.4";
+var packageVersion = "102.11.1";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/cjs/preset/core-plugin/index.js

@@ -13,6 +13,8 @@ var _requestDocument = require("./requestDocument");
  */
 var corePlugin = exports.corePlugin = function corePlugin(_ref) {
   var config = _ref.config;
+  // Create the document request throttler per editor (rather than at a module level)
+  var scheduleDocumentRequest = (0, _requestDocument.createThrottleSchedule)(_requestDocument.returnDocumentRequest);
   return {
     name: 'core',
     actions: {
@@ -75,7 +77,7 @@ var corePlugin = exports.corePlugin = function corePlugin(_ref) {
       requestDocument: function requestDocument(onReceive, options) {
         var _config$getEditorView;
         var view = (_config$getEditorView = config === null || config === void 0 ? void 0 : config.getEditorView()) !== null && _config$getEditorView !== void 0 ? _config$getEditorView : null;
-        (0, _requestDocument.scheduleDocumentRequest)(view, onReceive, options === null || options === void 0 ? void 0 : options.transformer, config === null || config === void 0 ? void 0 : config.fireAnalyticsEvent);
+        scheduleDocumentRequest(view, onReceive, options === null || options === void 0 ? void 0 : options.transformer, config === null || config === void 0 ? void 0 : config.fireAnalyticsEvent);
       },
       createTransformer: function createTransformer(cb) {
         var _config$getEditorView2;

package/dist/cjs/preset/core-plugin/requestDocument.js

@@ -4,7 +4,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.scheduleDocumentRequest = void 0;
+exports.createThrottleSchedule = createThrottleSchedule;
+exports.returnDocumentRequest = returnDocumentRequest;
 exports.toJSON = toJSON;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _editorJsonTransformer = require("@atlaskit/editor-json-transformer");
@@ -44,7 +45,6 @@ function createThrottleSchedule(callback) {
   };
   return wrapperFn;
 }
-var scheduleDocumentRequest = exports.scheduleDocumentRequest = createThrottleSchedule(returnDocumentRequest);
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function returnDocumentRequest(editorView, callback, transformer, fireAnalyticsEvent) {

package/dist/cjs/ui/DropList/index.js

@@ -23,7 +23,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "102.10.4";
+var packageVersion = "102.11.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/es2019/floating-toolbar/DropdownMenuExtensionItems.js

@@ -0,0 +1,126 @@
+import React, { useEffect, useState } from 'react';
+import Loadable from 'react-loadable';
+import { getContextualToolbarItemsFromModule } from '../extensions';
+import { nodeToJSON } from '../utils';
+import { DropdownMenuItem } from './DropdownMenuItem';
+const noop = () => null;
+const isDefaultExport = mod => {
+  return mod.hasOwnProperty('default');
+};
+const resolveExtensionIcon = async getIcon => {
+  if (!getIcon) {
+    return noop;
+  }
+  const maybeIcon = await getIcon();
+  return isDefaultExport(maybeIcon) ? maybeIcon.default : maybeIcon;
+};
+const convertExtensionToDropdownMenuItem = ({
+  item,
+  disabled,
+  node,
+  extension
+}) => {
+  const ButtonIcon = item.icon ? Loadable({
+    // Ignored via go/ees005
+    // eslint-disable-next-line require-await
+    loader: async () => resolveExtensionIcon(item.icon),
+    loading: noop
+  }) : undefined;
+  let 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;
+  return {
+    title,
+    icon: ButtonIcon ? /*#__PURE__*/React.createElement(ButtonIcon, {
+      label: item.label || ''
+    }) : undefined,
+    disabled: item.disabled,
+    onClick: () => {
+      if (typeof item.action !== 'function') {
+        throw new Error(`'action' of context toolbar item '${item.key}' is not a function`);
+      }
+      const targetNodeAdf = nodeToJSON(node);
+      extension.extensionApi && item.action(targetNodeAdf, extension.extensionApi);
+      return true;
+    }
+  };
+};
+const DropdownMenuExtensionItem = ({
+  item,
+  editorView,
+  disabled,
+  node,
+  extension,
+  dropdownOptions
+}) => {
+  const dropdownItem = convertExtensionToDropdownMenuItem({
+    item,
+    disabled,
+    node,
+    extension
+  });
+  if (!dropdownItem) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(DropdownMenuItem, {
+    key: item.key,
+    item: dropdownItem,
+    editorView: editorView,
+    hide: dropdownOptions.hide,
+    dispatchCommand: dropdownOptions.dispatchCommand,
+    showSelected: dropdownOptions.showSelected,
+    intl: dropdownOptions.intl
+  });
+};
+export const DropdownMenuExtensionItems = props => {
+  const {
+    node,
+    editorView,
+    extension,
+    disabled,
+    dropdownOptions
+  } = props;
+
+  // Ignored via go/ees005
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [extensions, setExtensions] = useState([]);
+  useEffect(() => {
+    getExtensions();
+    async function getExtensions() {
+      const provider = await extension.extensionProvider;
+      if (provider) {
+        setExtensions(await provider.getExtensions());
+      }
+    }
+  }, [extension.extensionProvider]);
+  const nodeAdf = React.useMemo(() => nodeToJSON(node), [node]);
+  const extensionItems = React.useMemo(() => {
+    if (!extension.extensionApi) {
+      return [];
+    }
+    return getContextualToolbarItemsFromModule(extensions, nodeAdf, extension.extensionApi);
+  }, [extensions, nodeAdf, extension.extensionApi]);
+  if (!extensionItems.length || !dropdownOptions) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, extensionItems.map((item, idx) => {
+    if (!('key' in item)) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(DropdownMenuExtensionItem, {
+      key: item.key,
+      item: item,
+      editorView: editorView,
+      disabled: disabled,
+      node: node,
+      extension: extension,
+      dropdownOptions: dropdownOptions
+    });
+  }));
+};