@atlaskit/editor-plugin-selection-extension/dist/cjs/ui/extension/SelectionExtensionComponentWrapper.js

editor-plugin-selection-extension plugin for @atlaskit/editor-core

"use strict";

var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SelectionExtensionComponentWrapper = void 0;
var _react = _interopRequireWildcard(require("react"));
var _analytics = require("@atlaskit/editor-common/analytics");
var _hooks = require("@atlaskit/editor-common/hooks");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
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 SelectionExtensionComponentWrapper = exports.SelectionExtensionComponentWrapper = function SelectionExtensionComponentWrapper(_ref) {
  var api = _ref.api,
    editorAnalyticsAPI = _ref.editorAnalyticsAPI;
  var componentRef = (0, _react.useRef)();
  var isToolbarAIFCEnabled = Boolean(api === null || api === void 0 ? void 0 : api.toolbar);
  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['selectionExtension', 'editorViewMode'], function (states) {
      var _states$selectionExte, _states$editorViewMod;
      return {
        activeExtension: (_states$selectionExte = states.selectionExtensionState) === null || _states$selectionExte === void 0 ? void 0 : _states$selectionExte.activeExtension,
        mode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
      };
    }),
    activeExtension = _useSharedPluginState.activeExtension,
    mode = _useSharedPluginState.mode;

  // Closed from active extension
  var handleOnClose = (0, _react.useCallback)(function () {
    api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.selectionExtension.commands.clearActiveExtension());
    // Clears reference to active component
    componentRef.current = undefined;
    if (editorAnalyticsAPI) {
      editorAnalyticsAPI.fireAnalyticsEvent({
        action: _analytics.ACTION.CLOSED,
        actionSubject: _analytics.ACTION_SUBJECT.EDITOR_PLUGIN_SELECTION_EXTENSION,
        actionSubjectId: _analytics.ACTION_SUBJECT_ID.EDITOR_PLUGIN_SELECTION_EXTENSION_COMPONENT,
        eventType: _analytics.EVENT_TYPE.TRACK
      });
    }
  }, [editorAnalyticsAPI, api]);

  // Closed from editor page mode change
  (0, _react.useEffect)(function () {
    if (componentRef.current !== undefined) {
      handleOnClose();
    }
  }, [handleOnClose, mode]);

  // Viewed analytics event for component mount
  (0, _react.useEffect)(function () {
    var extension = activeExtension === null || activeExtension === void 0 ? void 0 : activeExtension.extension;
    if (!extension) {
      return;
    }
    if (isToolbarAIFCEnabled || (0, _experiments.editorExperiment)('platform_editor_block_menu', true, {
      exposure: true
    })) {
      var currentComponent;
      if ('contentComponent' in extension && extension.contentComponent !== undefined) {
        currentComponent = extension.contentComponent;
      } else if ('component' in extension && extension.component !== undefined) {
        currentComponent = extension.component;
      }
      if (componentRef.current !== currentComponent && currentComponent !== undefined) {
        if (editorAnalyticsAPI) {
          editorAnalyticsAPI.fireAnalyticsEvent({
            action: _analytics.ACTION.VIEWED,
            actionSubject: _analytics.ACTION_SUBJECT.EDITOR_PLUGIN_SELECTION_EXTENSION,
            actionSubjectId: _analytics.ACTION_SUBJECT_ID.EDITOR_PLUGIN_SELECTION_EXTENSION_COMPONENT,
            eventType: _analytics.EVENT_TYPE.TRACK
          });
        }
        // Sets reference to active component
        componentRef.current = currentComponent;
      }
      return;
    }
    // delete this when cleaning up platform_editor_toolbar_aifc
    if (extension && 'component' in extension && componentRef.current !== extension.component && extension.component !== undefined) {
      if (editorAnalyticsAPI) {
        editorAnalyticsAPI.fireAnalyticsEvent({
          action: _analytics.ACTION.VIEWED,
          actionSubject: _analytics.ACTION_SUBJECT.EDITOR_PLUGIN_SELECTION_EXTENSION,
          actionSubjectId: _analytics.ACTION_SUBJECT_ID.EDITOR_PLUGIN_SELECTION_EXTENSION_COMPONENT,
          eventType: _analytics.EVENT_TYPE.TRACK
        });
      }
      // Sets reference to active component
      componentRef.current = extension.component;
    }
  }, [activeExtension, editorAnalyticsAPI, isToolbarAIFCEnabled]);
  var extension = activeExtension === null || activeExtension === void 0 ? void 0 : activeExtension.extension;
  if (!extension) {
    return null;
  }
  if (isToolbarAIFCEnabled || (0, _experiments.editorExperiment)('platform_editor_block_menu', true, {
    exposure: true
  })) {
    var hasContentComponent = function hasContentComponent(ext) {
      return 'contentComponent' in ext && ext.contentComponent !== undefined;
    };
    var hasComponent = function hasComponent(ext) {
      return 'component' in ext && ext.component !== undefined;
    };
    var _ExtensionComponent;
    if (hasContentComponent(extension)) {
      _ExtensionComponent = extension.contentComponent;
    } else if (hasComponent(extension)) {
      _ExtensionComponent = extension.component;
    }
    if (!_ExtensionComponent) {
      return null;
    }
    return /*#__PURE__*/_react.default.createElement(_ExtensionComponent, {
      closeExtension: handleOnClose,
      selection: activeExtension.selection
    });
  }

  // delete this when cleaning up platform_editor_toolbar_aifc
  if (!('component' in extension) || !extension.component) {
    return null;
  }
  var ExtensionComponent = extension.component;
  return /*#__PURE__*/_react.default.createElement(ExtensionComponent, {
    closeExtension: handleOnClose,
    selection: activeExtension.selection
  });
};