@atlaskit/editor-plugin-selection-extension/dist/es2019/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 const SelectionExtensionComponentWrapper = ({
  api,
  editorAnalyticsAPI
}) => {
  const componentRef = useRef();
  const isToolbarAIFCEnabled = Boolean(api === null || api === void 0 ? void 0 : api.toolbar);
  const {
    activeExtension,
    mode
  } = useSharedPluginStateWithSelector(api, ['selectionExtension', 'editorViewMode'], 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
    };
  });

  // Closed from active extension
  const handleOnClose = useCallback(() => {
    api === null || api === void 0 ? 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(() => {
    if (componentRef.current !== undefined) {
      handleOnClose();
    }
  }, [handleOnClose, mode]);

  // Viewed analytics event for component mount
  useEffect(() => {
    const extension = activeExtension === null || activeExtension === void 0 ? void 0 : activeExtension.extension;
    if (!extension) {
      return;
    }
    if (isToolbarAIFCEnabled || editorExperiment('platform_editor_block_menu', true, {
      exposure: true
    })) {
      let 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]);
  const extension = activeExtension === null || activeExtension === void 0 ? void 0 : activeExtension.extension;
  if (!extension) {
    return null;
  }
  if (isToolbarAIFCEnabled || editorExperiment('platform_editor_block_menu', true, {
    exposure: true
  })) {
    const hasContentComponent = ext => {
      return 'contentComponent' in ext && ext.contentComponent !== undefined;
    };
    const hasComponent = ext => {
      return 'component' in ext && ext.component !== undefined;
    };
    let 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;
  }
  const ExtensionComponent = extension.component;
  return /*#__PURE__*/React.createElement(ExtensionComponent, {
    closeExtension: handleOnClose,
    selection: activeExtension.selection
  });
};