@atlaskit/editor-plugin-toolbar-lists-indentation/dist/es2019/ui/FloatingToolbarComponent.js

Toolbar lists and indentation plugin for @atlaskit/editor-core

import React, { useState } from 'react';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { usePluginStateEffect } from '@atlaskit/editor-common/use-plugin-state-effect';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { getIndentationButtonsState } from '../pm-plugins/indentation-buttons';
import { ToolbarType } from '../types';
import ToolbarListsIndentation from './index';
const FloatingToolbarSettings = {
  disabled: false,
  isToolbarReducedSpacing: true,
  isSmall: true
};
export function FloatingToolbarComponent({
  featureFlags,
  editorView,
  showIndentationButtons,
  pluginInjectionApi,
  allowHeadingAndParagraphIndentation
}) {
  var _pluginInjectionApi$l;
  const {
    bulletListActive,
    bulletListDisabled,
    orderedListActive,
    orderedListDisabled,
    isIndentationAllowed,
    indentDisabled,
    outdentDisabled
  } = useSharedPluginStateWithSelector(pluginInjectionApi, ['list', 'indentation'], states => {
    var _states$listState, _states$listState2, _states$listState3, _states$listState4, _states$indentationSt, _states$indentationSt2, _states$indentationSt3, _states$listState5;
    return {
      bulletListActive: (_states$listState = states.listState) === null || _states$listState === void 0 ? void 0 : _states$listState.bulletListActive,
      bulletListDisabled: (_states$listState2 = states.listState) === null || _states$listState2 === void 0 ? void 0 : _states$listState2.bulletListDisabled,
      orderedListActive: (_states$listState3 = states.listState) === null || _states$listState3 === void 0 ? void 0 : _states$listState3.orderedListActive,
      orderedListDisabled: (_states$listState4 = states.listState) === null || _states$listState4 === void 0 ? void 0 : _states$listState4.orderedListDisabled,
      isIndentationAllowed: (_states$indentationSt = states.indentationState) === null || _states$indentationSt === void 0 ? void 0 : _states$indentationSt.isIndentationAllowed,
      indentDisabled: (_states$indentationSt2 = states.indentationState) === null || _states$indentationSt2 === void 0 ? void 0 : _states$indentationSt2.indentDisabled,
      outdentDisabled: (_states$indentationSt3 = states.indentationState) === null || _states$indentationSt3 === void 0 ? void 0 : _states$indentationSt3.outdentDisabled,
      // decorationSet is required to re-render PrimaryToolbarComponent component, so that the toolbar states updates regularly
      decorationSet: (_states$listState5 = states.listState) === null || _states$listState5 === void 0 ? void 0 : _states$listState5.decorationSet
    };
  });
  const [taskDecisionState, setTaskDecisionState] = useState();
  usePluginStateEffect(pluginInjectionApi, ['taskDecision'], ({
    taskDecisionState: newTaskDecisionState
  }) => {
    if ((newTaskDecisionState === null || newTaskDecisionState === void 0 ? void 0 : newTaskDecisionState.outdentDisabled) !== (taskDecisionState === null || taskDecisionState === void 0 ? void 0 : taskDecisionState.outdentDisabled) || (newTaskDecisionState === null || newTaskDecisionState === void 0 ? void 0 : newTaskDecisionState.indentDisabled) !== (taskDecisionState === null || taskDecisionState === void 0 ? void 0 : taskDecisionState.indentDisabled) || (newTaskDecisionState === null || newTaskDecisionState === void 0 ? void 0 : newTaskDecisionState.isInsideTask) !== (taskDecisionState === null || taskDecisionState === void 0 ? void 0 : taskDecisionState.isInsideTask)) {
      setTaskDecisionState({
        isInsideTask: Boolean(newTaskDecisionState === null || newTaskDecisionState === void 0 ? void 0 : newTaskDecisionState.isInsideTask),
        indentDisabled: Boolean(newTaskDecisionState === null || newTaskDecisionState === void 0 ? void 0 : newTaskDecisionState.indentDisabled),
        outdentDisabled: Boolean(newTaskDecisionState === null || newTaskDecisionState === void 0 ? void 0 : newTaskDecisionState.outdentDisabled)
      });
    }
  });
  const toolbarListsIndentationState = getIndentationButtonsState(editorView.state, allowHeadingAndParagraphIndentation, taskDecisionState, {
    isIndentationAllowed,
    indentDisabled,
    outdentDisabled
  }, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$l = pluginInjectionApi.list) === null || _pluginInjectionApi$l === void 0 ? void 0 : _pluginInjectionApi$l.actions.isInsideListItem);
  if (bulletListActive === undefined || bulletListDisabled === undefined || orderedListActive === undefined || orderedListDisabled === undefined) {
    return null;
  }
  return /*#__PURE__*/React.createElement(ToolbarListsIndentation, {
    featureFlags: featureFlags,
    isSmall: FloatingToolbarSettings.isSmall,
    isReducedSpacing: editorExperiment('platform_editor_controls', 'variant1') ? false : FloatingToolbarSettings.isToolbarReducedSpacing,
    disabled: FloatingToolbarSettings.disabled,
    editorView: editorView,
    bulletListActive: bulletListActive,
    bulletListDisabled: bulletListDisabled,
    orderedListActive: orderedListActive,
    orderedListDisabled: orderedListDisabled,
    showIndentationButtons: !!showIndentationButtons
    // Ignored via go/ees005
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    ,
    indentDisabled: toolbarListsIndentationState.indentDisabled
    // Ignored via go/ees005
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    ,
    outdentDisabled: toolbarListsIndentationState.outdentDisabled,
    indentationStateNode: toolbarListsIndentationState === null || toolbarListsIndentationState === void 0 ? void 0 : toolbarListsIndentationState.node,
    pluginInjectionApi: pluginInjectionApi,
    toolbarType: ToolbarType.FLOATING
  });
}