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

Rule plugin for @atlaskit/editor-core

import _defineProperty from "@babel/runtime/helpers/defineProperty";
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) { _defineProperty(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; }
import React from 'react';
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics/types/enums';
import commonMessages from '@atlaskit/editor-common/messages';
import { ruleMessages } from '@atlaskit/editor-common/messages/rule';
import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette/text';
import { findDomRefAtPos, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
import { akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles/constants';
import CopyIcon from '@atlaskit/icon/core/copy';
import CustomizeIcon from '@atlaskit/icon/core/customize';
import DeleteIcon from '@atlaskit/icon/core/delete';
import { removeHorizontalRule, updateHorizontalRuleColor, updateHorizontalRuleStyle, updateHorizontalRuleWeight } from '../pm-plugins/commands';
import { dividerColorPalette } from './dividerColorPalette';
import { dividerPaletteTooltipMessages } from './dividerColorPaletteMessages';
import { DividerOptions } from './DividerOptions';
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(ruleMessages.dividerOptions),
    iconBefore: CustomizeIcon,
    options: {
      width: 272,
      height: 184,
      render: function render(_ref) {
        var dispatchCommand = _ref.dispatchCommand;
        return /*#__PURE__*/React.createElement(DividerOptions, {
          style: ruleAttrs.style,
          weight: ruleAttrs.weight,
          onStyleChange: function onStyleChange(style) {
            var _api$analytics;
            return dispatchCommand(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(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(ruleMessages.dividerColors),
    isAriaExpanded: true,
    hideExpandIcon: true,
    defaultValue: dividerColorPalette.find(function (color) {
      return color.value === currentColor;
    }) || {
      label: formatMessage(ruleMessages.customDividerColor),
      value: currentColor,
      border: dividerColorPalette[0].border
    },
    options: dividerColorPalette,
    cols: 10,
    hexToPaletteColor: function hexToPaletteColor(color) {
      return color === "var(--ds-border, #0B120E24)" ? color : hexToEditorTextPaletteColor(color);
    },
    paletteColorTooltipMessages: dividerPaletteTooltipMessages,
    onChange: function onChange(option) {
      var _api$analytics3;
      return 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(commonMessages.copyToClipboard),
      icon: /*#__PURE__*/React.createElement(CopyIcon, {
        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, INPUT_METHOD.FLOATING_TB));
        return true;
      }
    }, hoverDecorationProps(akEditorSelectedNodeClassName)), _objectSpread({
      title: formatMessage(commonMessages.delete),
      icon: /*#__PURE__*/React.createElement(DeleteIcon, {
        label: ""
      }),
      onClick: 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;
};
export var getToolbarConfig = function getToolbarConfig(state, intl, api) {
  var formatMessage = intl.formatMessage;
  var selection = state.selection;
  var rule = state.schema.nodes.rule;
  var ruleNode = findSelectedNodeOfType(state.schema.nodes.rule)(state.selection);
  if (!ruleNode) {
    return undefined;
  }
  var getDomRef = function getDomRef(editorView) {
    var domAtPos = editorView.domAtPos.bind(editorView);
    var element = findDomRefAtPos(selection.from, domAtPos);
    return element;
  };
  return {
    title: formatMessage(ruleMessages.dividerFloatingControls),
    getDomRef: getDomRef,
    nodeType: [rule],
    items: getToolbarItems(formatMessage, rule, ruleNode.node.attrs, api),
    scrollable: true
  };
};