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

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

import React, { useState } from 'react';
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
import { ToolbarSize } from '@atlaskit/editor-common/types';
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 './ui';
import { FloatingToolbarComponent } from './ui/FloatingToolbarComponent';
export const toolbarListsIndentationPlugin = ({
  config,
  api
}) => {
  var _api$featureFlags, _api$primaryToolbar;
  const {
    showIndentationButtons = false,
    allowHeadingAndParagraphIndentation = false
  } = config !== null && config !== void 0 ? config : {};
  const featureFlags = (api === null || api === void 0 ? void 0 : (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
  const primaryToolbarComponent = ({
    editorView,
    popupsMountPoint,
    popupsBoundariesElement,
    popupsScrollableElement,
    toolbarSize,
    disabled,
    isToolbarReducedSpacing
  }) => {
    const isSmall = toolbarSize < ToolbarSize.L;
    return /*#__PURE__*/React.createElement(PrimaryToolbarComponent, {
      featureFlags: featureFlags,
      popupsMountPoint: popupsMountPoint,
      popupsBoundariesElement: popupsBoundariesElement,
      popupsScrollableElement: popupsScrollableElement,
      isSmall: isSmall,
      isToolbarReducedSpacing: isToolbarReducedSpacing,
      disabled: disabled,
      editorView: editorView,
      showIndentationButtons: showIndentationButtons,
      pluginInjectionApi: api,
      allowHeadingAndParagraphIndentation: allowHeadingAndParagraphIndentation
    });
  };
  api === null || api === void 0 ? void 0 : (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? void 0 : _api$primaryToolbar.actions.registerComponent({
    name: 'toolbarListsIndentation',
    component: primaryToolbarComponent
  });
  return {
    name: 'toolbarListsIndentation',
    pluginsOptions: {
      selectionToolbar() {
        if (editorExperiment('contextual_formatting_toolbar', true, {
          exposure: true
        }) || editorExperiment('platform_editor_contextual_formatting_toolbar_v2', 'variant1', {
          exposure: true
        }) || editorExperiment('platform_editor_contextual_formatting_toolbar_v2', 'variant2', {
          exposure: true
        })) {
          const toolbarCustom = {
            type: 'custom',
            render: view => {
              if (!view) {
                return;
              }
              return /*#__PURE__*/React.createElement(FloatingToolbarComponent, {
                editorView: view,
                featureFlags: featureFlags,
                pluginInjectionApi: api,
                showIndentationButtons: showIndentationButtons,
                allowHeadingAndParagraphIndentation: allowHeadingAndParagraphIndentation
              });
            },
            fallback: []
          };
          return {
            rank: 3,
            isToolbarAbove: true,
            items: [toolbarCustom],
            pluginName: 'toolbarListsIndentation'
          };
        } else {
          return undefined;
        }
      }
    },
    primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
  };
};
export function PrimaryToolbarComponent({
  featureFlags,
  popupsMountPoint,
  popupsBoundariesElement,
  popupsScrollableElement,
  isSmall,
  isToolbarReducedSpacing,
  disabled,
  editorView,
  showIndentationButtons,
  pluginInjectionApi,
  allowHeadingAndParagraphIndentation
}) {
  var _pluginInjectionApi$l;
  const {
    listState,
    indentationState
  } = useSharedPluginState(pluginInjectionApi, ['list', 'indentation']);
  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, indentationState, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$l = pluginInjectionApi.list) === null || _pluginInjectionApi$l === void 0 ? void 0 : _pluginInjectionApi$l.actions.isInsideListItem);
  if (!listState) {
    return null;
  }
  return /*#__PURE__*/React.createElement(ToolbarListsIndentation, {
    featureFlags: featureFlags,
    isSmall: isSmall,
    isReducedSpacing: isToolbarReducedSpacing,
    disabled: disabled,
    editorView: editorView,
    popupsMountPoint: popupsMountPoint,
    popupsBoundariesElement: popupsBoundariesElement,
    popupsScrollableElement: popupsScrollableElement
    // Ignored via go/ees005
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    ,
    bulletListActive: listState.bulletListActive
    // Ignored via go/ees005
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    ,
    bulletListDisabled: listState.bulletListDisabled
    // Ignored via go/ees005
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    ,
    orderedListActive: listState.orderedListActive
    // Ignored via go/ees005
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    ,
    orderedListDisabled: listState.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.PRIMARY
  });
}