@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/types/enums';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/useSharedPluginStateWithSelector';
export const SelectionExtensionComponentWrapper = ({
  api,
  editorAnalyticsAPI
}) => {
  const componentRef = useRef();
  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;
    }
    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;
    }
  }, [activeExtension, editorAnalyticsAPI]);
  const extension = activeExtension === null || activeExtension === void 0 ? void 0 : activeExtension.extension;
  if (!extension) {
    return null;
  }
  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
  });
};