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

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

import React, { useCallback, useEffect, useRef } from 'react';
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
export var SelectionExtensionComponentWrapper = function SelectionExtensionComponentWrapper(_ref) {
  var api = _ref.api,
    editorAnalyticsAPI = _ref.editorAnalyticsAPI;
  var componentRef = useRef();
  var isToolbarAIFCEnabled = Boolean(api === null || api === void 0 ? void 0 : api.toolbar);
  var _useSharedPluginState = 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 = 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: ACTION.CLOSED,
        actionSubject: ACTION_SUBJECT.EDITOR_PLUGIN_SELECTION_EXTENSION,
        actionSubjectId: ACTION_SUBJECT_ID.EDITOR_PLUGIN_SELECTION_EXTENSION_COMPONENT,
        eventType: EVENT_TYPE.TRACK
      });
    }
  }, [editorAnalyticsAPI, api]);

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

  // Viewed analytics event for component mount
  useEffect(function () {
    var extension = activeExtension === null || activeExtension === void 0 ? void 0 : activeExtension.extension;
    if (!extension) {
      return;
    }
    if (isToolbarAIFCEnabled || 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: ACTION.VIEWED,
            actionSubject: ACTION_SUBJECT.EDITOR_PLUGIN_SELECTION_EXTENSION,
            actionSubjectId: ACTION_SUBJECT_ID.EDITOR_PLUGIN_SELECTION_EXTENSION_COMPONENT,
            eventType: 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: ACTION.VIEWED,
          actionSubject: ACTION_SUBJECT.EDITOR_PLUGIN_SELECTION_EXTENSION,
          actionSubjectId: ACTION_SUBJECT_ID.EDITOR_PLUGIN_SELECTION_EXTENSION_COMPONENT,
          eventType: 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 || 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.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.createElement(ExtensionComponent, {
    closeExtension: handleOnClose,
    selection: activeExtension.selection
  });
};