@atlaskit/editor-plugin-alignment/dist/es2019/ui/FloatingToolbarComponent.js

Alignment plugin for @atlaskit/editor-core

import React, { useCallback } from 'react';
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { changeAlignment } from '../editor-commands';
import { ToolbarType } from '../pm-plugins/types';
import ToolbarAlignment from './ToolbarAlignment';
const FloatingToolbarSettings = {
  disabled: false,
  isToolbarReducedSpacing: true
};
export function FloatingToolbarComponent({
  api,
  editorView
}) {
  const {
    align,
    isEnabled
  } = useSharedPluginStateWithSelector(api, ['alignment'], states => {
    var _states$alignmentStat, _states$alignmentStat2;
    return {
      align: (_states$alignmentStat = states.alignmentState) === null || _states$alignmentStat === void 0 ? void 0 : _states$alignmentStat.align,
      isEnabled: (_states$alignmentStat2 = states.alignmentState) === null || _states$alignmentStat2 === void 0 ? void 0 : _states$alignmentStat2.isEnabled
    };
  });
  const changeAlignmentCallback = useCallback(align => {
    return changeAlignment(align, api, INPUT_METHOD.FLOATING_TB)(editorView.state, editorView.dispatch);
  }, [editorView, api]);
  return /*#__PURE__*/React.createElement(ToolbarAlignment, {
    align: align,
    isReducedSpacing: editorExperiment('platform_editor_controls', 'variant1') ? false : FloatingToolbarSettings.isToolbarReducedSpacing,
    changeAlignment: changeAlignmentCallback,
    disabled: FloatingToolbarSettings.disabled || !isEnabled,
    toolbarType: ToolbarType.FLOATING,
    api: api
  });
}