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

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

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
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';
var FloatingToolbarSettings = {
  disabled: false,
  isToolbarReducedSpacing: true,
  isSmall: true
};
export function FloatingToolbarComponent(_ref) {
  var _pluginInjectionApi$l;
  var featureFlags = _ref.featureFlags,
    editorView = _ref.editorView,
    showIndentationButtons = _ref.showIndentationButtons,
    pluginInjectionApi = _ref.pluginInjectionApi,
    allowHeadingAndParagraphIndentation = _ref.allowHeadingAndParagraphIndentation;
  var _useSharedPluginState = useSharedPluginStateWithSelector(pluginInjectionApi, ['list', 'indentation'], function (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
      };
    }),
    bulletListActive = _useSharedPluginState.bulletListActive,
    bulletListDisabled = _useSharedPluginState.bulletListDisabled,
    orderedListActive = _useSharedPluginState.orderedListActive,
    orderedListDisabled = _useSharedPluginState.orderedListDisabled,
    isIndentationAllowed = _useSharedPluginState.isIndentationAllowed,
    indentDisabled = _useSharedPluginState.indentDisabled,
    outdentDisabled = _useSharedPluginState.outdentDisabled;
  var _useState = useState(),
    _useState2 = _slicedToArray(_useState, 2),
    taskDecisionState = _useState2[0],
    setTaskDecisionState = _useState2[1];
  usePluginStateEffect(pluginInjectionApi, ['taskDecision'], function (_ref2) {
    var newTaskDecisionState = _ref2.taskDecisionState;
    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)
      });
    }
  });
  var toolbarListsIndentationState = getIndentationButtonsState(editorView.state, allowHeadingAndParagraphIndentation, taskDecisionState, {
    isIndentationAllowed: isIndentationAllowed,
    indentDisabled: indentDisabled,
    outdentDisabled: outdentDisabled
  }, pluginInjectionApi === null || pluginInjectionApi === 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
  });
}