@atlaskit/editor-plugin-emoji/dist/cjs/ui/InlineEmojiPopup.js

Emoji plugin for @atlaskit/editor-core

"use strict";

var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.InlineEmojiPopupOld = exports.InlineEmojiPopup = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactIntl = require("react-intl");
var _analytics = require("@atlaskit/editor-common/analytics");
var _getDomRefFromSelection = require("@atlaskit/editor-common/get-dom-ref-from-selection");
var _hooks = require("@atlaskit/editor-common/hooks");
var _ui = require("@atlaskit/editor-common/ui");
var _uiReact = require("@atlaskit/editor-common/ui-react");
var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _emoji = require("@atlaskit/emoji");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _actions = require("../pm-plugins/actions");
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 PopupWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_ui.Popup);
var emojiPopupMessages = {
  emojiPickerAriaLabel: {
    id: 'fabric.emoji.picker.aria.label',
    defaultMessage: 'Emoji picker',
    description: 'Accessible label for the emoji picker popup'
  }
};
var InlineEmojiPopupOld = exports.InlineEmojiPopupOld = function InlineEmojiPopupOld(_ref) {
  var _useSharedPluginState, _useSharedPluginState2, _api$analytics;
  var api = _ref.api,
    popupsMountPoint = _ref.popupsMountPoint,
    popupsBoundariesElement = _ref.popupsBoundariesElement,
    popupsScrollableElement = _ref.popupsScrollableElement,
    editorView = _ref.editorView,
    onClose = _ref.onClose;
  var _ref2 = (_useSharedPluginState = (_useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['emoji'])) === null || _useSharedPluginState2 === void 0 ? void 0 : _useSharedPluginState2.emojiState) !== null && _useSharedPluginState !== void 0 ? _useSharedPluginState : {},
    emojiProvider = _ref2.emojiProvider,
    isOpen = _ref2.inlineEmojiPopupOpen;
  var intl = (0, _reactIntl.useIntl)();
  (0, _react.useEffect)(function () {
    if (isOpen && (0, _platformFeatureFlags.fg)('platform_editor_ease_of_use_metrics')) {
      var _api$metrics;
      api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$metrics = api.metrics) === null || _api$metrics === void 0 ? void 0 : _api$metrics.commands.handleIntentToStartEdit({
        shouldStartTimer: false,
        shouldPersistActiveSession: true
      }));
    }
  }, [isOpen, api]);
  var handleOnClose = (0, _react.useCallback)(function () {
    if ((0, _platformFeatureFlags.fg)('platform_editor_ease_of_use_metrics')) {
      var _api$metrics2;
      api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$metrics2 = api.metrics) === null || _api$metrics2 === void 0 ? void 0 : _api$metrics2.commands.startActiveSessionTimer());
    }
    onClose === null || onClose === void 0 || onClose();
  }, [onClose, api]);
  var focusEditor = (0, _react.useCallback)(function () {
    // use requestAnimationFrame to run this async after the call
    requestAnimationFrame(function () {
      return editorView.focus();
    });
  }, [editorView]);
  var handleSelection = (0, _react.useCallback)(function (emojiId) {
    api.core.actions.execute(api.emoji.commands.insertEmoji(emojiId, _analytics.INPUT_METHOD.PICKER));
    handleOnClose();
  }, [api.core.actions, api.emoji.commands, handleOnClose]);
  if (!isOpen || !emojiProvider) {
    return null;
  }
  var domRef = (0, _getDomRefFromSelection.getDomRefFromSelection)(editorView, _analytics.ACTION_SUBJECT_ID.PICKER_EMOJI, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
  return /*#__PURE__*/_react.default.createElement(PopupWithListeners, {
    ariaLabel: intl.formatMessage(emojiPopupMessages.emojiPickerAriaLabel)
    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
    ,
    offset: [0, 12],
    mountTo: popupsMountPoint,
    boundariesElement: popupsBoundariesElement,
    scrollableElement: popupsScrollableElement,
    zIndex: _editorSharedStyles.akEditorFloatingDialogZIndex,
    fitHeight: 350,
    fitWidth: 350,
    target: domRef,
    onUnmount: focusEditor,
    focusTrap: true,
    preventOverflow: true,
    handleClickOutside: handleOnClose,
    handleEscapeKeydown: handleOnClose,
    captureClick: true
  }, /*#__PURE__*/_react.default.createElement(_uiReact.OutsideClickTargetRefContext.Consumer, null, function (setOutsideClickTargetRef) {
    return /*#__PURE__*/_react.default.createElement(_emoji.EmojiPicker, {
      emojiProvider: Promise.resolve(emojiProvider),
      onPickerRef: setOutsideClickTargetRef,
      onSelection: handleSelection
    });
  }));
};
var InlineEmojiPopupContent = function InlineEmojiPopupContent(_ref3) {
  var _api$metrics4, _api$metrics6, _api$analytics3;
  var api = _ref3.api,
    popupsMountPoint = _ref3.popupsMountPoint,
    popupsBoundariesElement = _ref3.popupsBoundariesElement,
    popupsScrollableElement = _ref3.popupsScrollableElement,
    editorView = _ref3.editorView;
  var emojiProvider = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'emoji.emojiProvider');
  var intl = (0, _reactIntl.useIntl)();
  (0, _react.useEffect)(function () {
    if ((0, _platformFeatureFlags.fg)('platform_editor_ease_of_use_metrics')) {
      var _api$metrics3;
      api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$metrics3 = api.metrics) === null || _api$metrics3 === void 0 ? void 0 : _api$metrics3.commands.handleIntentToStartEdit({
        shouldStartTimer: false,
        shouldPersistActiveSession: true
      }));
    }
  }, [api === null || api === void 0 ? void 0 : api.core.actions, api === null || api === void 0 || (_api$metrics4 = api.metrics) === null || _api$metrics4 === void 0 ? void 0 : _api$metrics4.commands]);
  var handleOnClose = (0, _react.useCallback)(function () {
    editorView.dispatch((0, _actions.setInlineEmojiPopupOpen)(false)(editorView.state.tr));
    if ((0, _platformFeatureFlags.fg)('platform_editor_ease_of_use_metrics')) {
      var _api$metrics5;
      api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$metrics5 = api.metrics) === null || _api$metrics5 === void 0 ? void 0 : _api$metrics5.commands.startActiveSessionTimer());
    }
  }, [editorView, api.core.actions, (_api$metrics6 = api.metrics) === null || _api$metrics6 === void 0 ? void 0 : _api$metrics6.commands]);
  var focusEditor = (0, _react.useCallback)(function () {
    // use requestAnimationFrame to run this async after the call
    requestAnimationFrame(function () {
      return editorView.focus();
    });
  }, [editorView]);
  var handleSelection = (0, _react.useCallback)(function (emojiId) {
    api.core.actions.execute(api.emoji.commands.insertEmoji(emojiId, _analytics.INPUT_METHOD.PICKER));
    handleOnClose();
  }, [api.core.actions, api.emoji.commands, handleOnClose]);
  var domRef = (0, _react.useMemo)(function () {
    var _api$analytics2;
    return (0, _getDomRefFromSelection.getDomRefFromSelection)(editorView, _analytics.ACTION_SUBJECT_ID.PICKER_EMOJI, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions);
  }, [editorView, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions]);
  if (!emojiProvider) {
    return null;
  }
  return /*#__PURE__*/_react.default.createElement(PopupWithListeners, {
    ariaLabel: intl.formatMessage(emojiPopupMessages.emojiPickerAriaLabel)
    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
    ,
    offset: [0, 12],
    mountTo: popupsMountPoint,
    boundariesElement: popupsBoundariesElement,
    scrollableElement: popupsScrollableElement,
    zIndex: _editorSharedStyles.akEditorFloatingDialogZIndex,
    fitHeight: 350,
    fitWidth: 350,
    target: domRef,
    onUnmount: focusEditor,
    focusTrap: true,
    preventOverflow: true,
    handleClickOutside: handleOnClose,
    handleEscapeKeydown: handleOnClose,
    captureClick: true
  }, /*#__PURE__*/_react.default.createElement(_uiReact.OutsideClickTargetRefContext.Consumer, null, function (setOutsideClickTargetRef) {
    return /*#__PURE__*/_react.default.createElement(_emoji.EmojiPicker, {
      emojiProvider: Promise.resolve(emojiProvider),
      onPickerRef: setOutsideClickTargetRef,
      onSelection: handleSelection
    });
  }));
};
var InlineEmojiPopup = exports.InlineEmojiPopup = /*#__PURE__*/_react.default.memo(function (_ref4) {
  var api = _ref4.api,
    popupsMountPoint = _ref4.popupsMountPoint,
    popupsBoundariesElement = _ref4.popupsBoundariesElement,
    popupsScrollableElement = _ref4.popupsScrollableElement,
    editorView = _ref4.editorView;
  var isOpen = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'emoji.inlineEmojiPopupOpen');
  if (!isOpen) {
    return null;
  }
  return /*#__PURE__*/_react.default.createElement(InlineEmojiPopupContent, {
    api: api,
    editorView: editorView,
    popupsBoundariesElement: popupsBoundariesElement,
    popupsMountPoint: popupsMountPoint,
    popupsScrollableElement: popupsScrollableElement
  });
});