@atlaskit/editor-plugin-find-replace/dist/es2019/findReplacePlugin.js

find replace plugin for @atlaskit/editor-core

import React from 'react';
import { TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
import { ToolbarSize } from '@atlaskit/editor-common/types';
import { fg } from '@atlaskit/platform-feature-flags';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { activate } from './pm-plugins/commands';
import { activateWithAnalytics } from './pm-plugins/commands-with-analytics';
import keymapPlugin from './pm-plugins/keymap';
import { createPlugin } from './pm-plugins/main';
import { findReplacePluginKey } from './pm-plugins/plugin-key';
import FindReplaceDropDownOrToolbarButtonWithState from './ui/FindReplaceDropDownOrToolbarButtonWithState';
export const findReplacePlugin = ({
  config: props,
  api
}) => {
  var _api$primaryToolbar;
  const editorViewRef = {
    current: null
  };
  const toolbarButtonRegisteredExternally = {
    current: false
  };
  const primaryToolbarComponent = ({
    popupsBoundariesElement,
    popupsMountPoint,
    popupsScrollableElement,
    isToolbarReducedSpacing,
    toolbarSize,
    editorView,
    containerElement,
    dispatchAnalyticsEvent
  }) => {
    if (!editorView) {
      return null;
    }
    const isButtonHidden = fg('platform_editor_toolbar_responsive_fixes') ? toolbarSize < ToolbarSize.XL : false;
    if (props !== null && props !== void 0 && props.twoLineEditorToolbar) {
      return null;
    } else if (toolbarButtonRegisteredExternally.current && editorExperiment('platform_editor_controls', 'variant1')) {
      return null;
    } else {
      return /*#__PURE__*/React.createElement(FindReplaceDropDownOrToolbarButtonWithState, {
        popupsBoundariesElement: popupsBoundariesElement,
        popupsMountPoint: popupsMountPoint,
        popupsScrollableElement: popupsScrollableElement,
        isToolbarReducedSpacing: isToolbarReducedSpacing,
        editorView: editorView,
        containerElement: containerElement,
        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
        takeFullWidth: props === null || props === void 0 ? void 0 : props.takeFullWidth,
        api: api,
        isButtonHidden: isButtonHidden
      });
    }
  };
  api === null || api === void 0 ? void 0 : (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? void 0 : _api$primaryToolbar.actions.registerComponent({
    name: 'findReplace',
    component: primaryToolbarComponent
  });
  return {
    name: 'findReplace',
    pmPlugins() {
      const plugins = [{
        name: 'findReplace',
        plugin: ({
          dispatch,
          getIntl
        }) => createPlugin(dispatch, getIntl, api)
      }, {
        name: 'findReplaceKeymap',
        plugin: () => {
          var _api$analytics;
          return keymapPlugin(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
        }
      }];
      if (editorExperiment('platform_editor_controls', 'variant1', {
        exposure: false
      })) {
        plugins.push({
          name: 'findReplaceEditorViewReferencePlugin',
          plugin: () => {
            return new SafePlugin({
              view: editorView => {
                editorViewRef.current = editorView;
                return {
                  destroy: () => {
                    editorViewRef.current = null;
                  }
                };
              }
            });
          }
        });
      }
      return plugins;
    },
    getSharedState(editorState) {
      if (!editorState) {
        return undefined;
      }
      return findReplacePluginKey.getState(editorState) || undefined;
    },
    actions: {
      registerToolbarButton: ({
        popupsBoundariesElement,
        popupsMountPoint,
        popupsScrollableElement,
        editorView,
        containerElement,
        dispatchAnalyticsEvent,
        isToolbarReducedSpacing
      }) => {
        toolbarButtonRegisteredExternally.current = editorExperiment('platform_editor_controls', 'variant1');
        return /*#__PURE__*/React.createElement(FindReplaceDropDownOrToolbarButtonWithState, {
          popupsBoundariesElement: popupsBoundariesElement,
          popupsMountPoint: popupsMountPoint,
          popupsScrollableElement: popupsScrollableElement,
          editorView: editorView,
          containerElement: containerElement,
          dispatchAnalyticsEvent: dispatchAnalyticsEvent,
          isToolbarReducedSpacing: isToolbarReducedSpacing,
          api: api
        });
      },
      activateFindReplace: triggerMethod => {
        var _api$analytics2;
        if (!editorViewRef.current) {
          return false;
        }
        const {
          state,
          dispatch
        } = editorViewRef.current;
        if (api !== null && api !== void 0 && (_api$analytics2 = api.analytics) !== null && _api$analytics2 !== void 0 && _api$analytics2.actions) {
          var _api$analytics3;
          activateWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions)({
            triggerMethod: triggerMethod || TRIGGER_METHOD.EXTERNAL
          })(state, dispatch);
        } else {
          activate()(state, dispatch);
        }
        return true;
      }
    },
    primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined,
    contentComponent: editorExperiment('platform_editor_controls', 'variant1', {
      exposure: true
    }) ? ({
      editorView,
      containerElement,
      popupsMountPoint,
      popupsBoundariesElement,
      popupsScrollableElement,
      wrapperElement,
      dispatchAnalyticsEvent
    }) => {
      if (toolbarButtonRegisteredExternally.current || !editorView) {
        return null;
      }
      const popupsMountPointEl = popupsMountPoint || ( // eslint-disable-next-line @atlaskit/editor/no-as-casting
      wrapperElement === null || wrapperElement === void 0 ? void 0 : wrapperElement.querySelector("[data-editor-container='true']"));
      return /*#__PURE__*/React.createElement(FindReplaceDropDownOrToolbarButtonWithState, {
        popupsBoundariesElement: popupsBoundariesElement,
        popupsMountPoint: popupsMountPointEl,
        popupsScrollableElement: popupsScrollableElement || containerElement || undefined,
        isToolbarReducedSpacing: false,
        editorView: editorView,
        containerElement: containerElement,
        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
        takeFullWidth: props === null || props === void 0 ? void 0 : props.takeFullWidth,
        api: api,
        doesNotHaveButton: true
      });
    } : undefined
  };
};