@atlaskit/editor-plugin-rule/dist/cjs/ui/toolbar.js

Rule plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getToolbarConfig = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _enums = require("@atlaskit/editor-common/analytics/types/enums");
var _messages = _interopRequireDefault(require("@atlaskit/editor-common/messages"));
var _rule = require("@atlaskit/editor-common/messages/rule");
var _text = require("@atlaskit/editor-palette/text");
var _utils = require("@atlaskit/editor-prosemirror/utils");
var _constants = require("@atlaskit/editor-shared-styles/constants");
var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
var _customize = _interopRequireDefault(require("@atlaskit/icon/core/customize"));
var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
var _commands = require("../pm-plugins/commands");
var _dividerColorPalette = require("./dividerColorPalette");
var _dividerColorPaletteMessages = require("./dividerColorPaletteMessages");
var _DividerOptions = require("./DividerOptions");
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var getToolbarItems = function getToolbarItems(formatMessage, ruleNodeType, ruleAttrs, api) {
  var _api$decorations, _api$analytics4;
  var hoverDecoration = api === null || api === void 0 || (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions.hoverDecoration;
  var hoverDecorationProps = function hoverDecorationProps(className) {
    return {
      onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(ruleNodeType, true, className),
      onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(ruleNodeType, false, className),
      onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(ruleNodeType, true, className),
      onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(ruleNodeType, false, className)
    };
  };
  var currentColor = ruleAttrs.color || "var(--ds-border, #0B120E24)";
  var items = [{
    id: 'divider-options',
    type: 'dropdown',
    testId: 'divider-options',
    title: formatMessage(_rule.ruleMessages.dividerOptions),
    iconBefore: _customize.default,
    options: {
      width: 272,
      height: 184,
      render: function render(_ref) {
        var dispatchCommand = _ref.dispatchCommand;
        return /*#__PURE__*/_react.default.createElement(_DividerOptions.DividerOptions, {
          style: ruleAttrs.style,
          weight: ruleAttrs.weight,
          onStyleChange: function onStyleChange(style) {
            var _api$analytics;
            return dispatchCommand((0, _commands.updateHorizontalRuleStyle)(style, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions));
          },
          onWeightChange: function onWeightChange(weight) {
            var _api$analytics2;
            return dispatchCommand((0, _commands.updateHorizontalRuleWeight)(weight, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions));
          }
        });
      }
    }
  }, {
    id: 'divider-color-picker',
    type: 'select',
    selectType: 'color',
    title: formatMessage(_rule.ruleMessages.dividerColors),
    isAriaExpanded: true,
    hideExpandIcon: true,
    defaultValue: _dividerColorPalette.dividerColorPalette.find(function (color) {
      return color.value === currentColor;
    }) || {
      label: formatMessage(_rule.ruleMessages.customDividerColor),
      value: currentColor,
      border: _dividerColorPalette.dividerColorPalette[0].border
    },
    options: _dividerColorPalette.dividerColorPalette,
    cols: 10,
    hexToPaletteColor: function hexToPaletteColor(color) {
      return color === "var(--ds-border, #0B120E24)" ? color : (0, _text.hexToEditorTextPaletteColor)(color);
    },
    paletteColorTooltipMessages: _dividerColorPaletteMessages.dividerPaletteTooltipMessages,
    onChange: function onChange(option) {
      var _api$analytics3;
      return (0, _commands.updateHorizontalRuleColor)(option.value, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions);
    }
  }, {
    type: 'separator',
    fullHeight: true
  }];
  var overflowMenuItems = [{
    type: 'overflow-dropdown',
    options: [_objectSpread({
      title: formatMessage(_messages.default.copyToClipboard),
      icon: /*#__PURE__*/_react.default.createElement(_copy.default, {
        label: ""
      }),
      onClick: function onClick() {
        var _api$core, _api$floatingToolbar;
        api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$floatingToolbar = api.floatingToolbar) === null || _api$floatingToolbar === void 0 ? void 0 : _api$floatingToolbar.commands.copyNode(ruleNodeType, _enums.INPUT_METHOD.FLOATING_TB));
        return true;
      }
    }, hoverDecorationProps(_constants.akEditorSelectedNodeClassName)), _objectSpread({
      title: formatMessage(_messages.default.delete),
      icon: /*#__PURE__*/_react.default.createElement(_delete.default, {
        label: ""
      }),
      onClick: (0, _commands.removeHorizontalRule)(api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions)
    }, hoverDecorationProps())]
  }];
  items.push.apply(items, overflowMenuItems);
  return items;
};
var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(state, intl, api) {
  var formatMessage = intl.formatMessage;
  var selection = state.selection;
  var rule = state.schema.nodes.rule;
  var ruleNode = (0, _utils.findSelectedNodeOfType)(state.schema.nodes.rule)(state.selection);
  if (!ruleNode) {
    return undefined;
  }
  var getDomRef = function getDomRef(editorView) {
    var domAtPos = editorView.domAtPos.bind(editorView);
    var element = (0, _utils.findDomRefAtPos)(selection.from, domAtPos);
    return element;
  };
  return {
    title: formatMessage(_rule.ruleMessages.dividerFloatingControls),
    getDomRef: getDomRef,
    nodeType: [rule],
    items: getToolbarItems(formatMessage, rule, ruleNode.node.attrs, api),
    scrollable: true
  };
};