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

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.PrimaryToolbarComponent = PrimaryToolbarComponent;
exports.toolbarListsIndentationPlugin = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _hooks = require("@atlaskit/editor-common/hooks");
var _types = require("@atlaskit/editor-common/types");
var _usePluginStateEffect = require("@atlaskit/editor-common/use-plugin-state-effect");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _indentationButtons = require("./pm-plugins/indentation-buttons");
var _types2 = require("./types");
var _ui = _interopRequireDefault(require("./ui"));
var _FloatingToolbarComponent = require("./ui/FloatingToolbarComponent");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
var toolbarListsIndentationPlugin = exports.toolbarListsIndentationPlugin = function toolbarListsIndentationPlugin(_ref) {
  var _api$featureFlags, _api$primaryToolbar;
  var config = _ref.config,
    api = _ref.api;
  var _ref2 = config !== null && config !== void 0 ? config : {},
    _ref2$showIndentation = _ref2.showIndentationButtons,
    showIndentationButtons = _ref2$showIndentation === void 0 ? false : _ref2$showIndentation,
    _ref2$allowHeadingAnd = _ref2.allowHeadingAndParagraphIndentation,
    allowHeadingAndParagraphIndentation = _ref2$allowHeadingAnd === void 0 ? false : _ref2$allowHeadingAnd;
  var featureFlags = (api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
  var primaryToolbarComponent = function primaryToolbarComponent(_ref3) {
    var editorView = _ref3.editorView,
      popupsMountPoint = _ref3.popupsMountPoint,
      popupsBoundariesElement = _ref3.popupsBoundariesElement,
      popupsScrollableElement = _ref3.popupsScrollableElement,
      toolbarSize = _ref3.toolbarSize,
      disabled = _ref3.disabled,
      isToolbarReducedSpacing = _ref3.isToolbarReducedSpacing;
    var isSmall = toolbarSize < _types.ToolbarSize.L;
    return /*#__PURE__*/_react.default.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 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
    name: 'toolbarListsIndentation',
    component: primaryToolbarComponent
  });
  return {
    name: 'toolbarListsIndentation',
    pluginsOptions: {
      selectionToolbar: function selectionToolbar() {
        if ((0, _experiments.editorExperiment)('contextual_formatting_toolbar', true, {
          exposure: true
        }) || (0, _experiments.editorExperiment)('platform_editor_contextual_formatting_toolbar_v2', 'variant1', {
          exposure: true
        }) || (0, _experiments.editorExperiment)('platform_editor_contextual_formatting_toolbar_v2', 'variant2', {
          exposure: true
        })) {
          var toolbarCustom = {
            type: 'custom',
            render: function render(view) {
              if (!view) {
                return;
              }
              return /*#__PURE__*/_react.default.createElement(_FloatingToolbarComponent.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
  };
};
function PrimaryToolbarComponent(_ref4) {
  var _pluginInjectionApi$l;
  var featureFlags = _ref4.featureFlags,
    popupsMountPoint = _ref4.popupsMountPoint,
    popupsBoundariesElement = _ref4.popupsBoundariesElement,
    popupsScrollableElement = _ref4.popupsScrollableElement,
    isSmall = _ref4.isSmall,
    isToolbarReducedSpacing = _ref4.isToolbarReducedSpacing,
    disabled = _ref4.disabled,
    editorView = _ref4.editorView,
    showIndentationButtons = _ref4.showIndentationButtons,
    pluginInjectionApi = _ref4.pluginInjectionApi,
    allowHeadingAndParagraphIndentation = _ref4.allowHeadingAndParagraphIndentation;
  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['list', 'indentation']),
    listState = _useSharedPluginState.listState,
    indentationState = _useSharedPluginState.indentationState;
  var _useState = (0, _react.useState)(),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    taskDecisionState = _useState2[0],
    setTaskDecisionState = _useState2[1];
  (0, _usePluginStateEffect.usePluginStateEffect)(pluginInjectionApi, ['taskDecision'], function (_ref5) {
    var newTaskDecisionState = _ref5.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 = (0, _indentationButtons.getIndentationButtonsState)(editorView.state, allowHeadingAndParagraphIndentation, taskDecisionState, indentationState, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$l = pluginInjectionApi.list) === null || _pluginInjectionApi$l === void 0 ? void 0 : _pluginInjectionApi$l.actions.isInsideListItem);
  if (!listState) {
    return null;
  }
  return /*#__PURE__*/_react.default.createElement(_ui.default, {
    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: _types2.ToolbarType.PRIMARY
  });
}