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

Rule plugin for @atlaskit/editor-core

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';
const getToolbarItems = (formatMessage, ruleNodeType, ruleAttrs, api) => {
  var _api$decorations, _api$analytics4;
  const hoverDecoration = api === null || api === void 0 ? void 0 : (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions.hoverDecoration;
  const hoverDecorationProps = className => ({
    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)
  });
  const currentColor = ruleAttrs.color || "var(--ds-border, #0B120E24)";
  const items = [{
    id: 'divider-options',
    type: 'dropdown',
    testId: 'divider-options',
    title: formatMessage(ruleMessages.dividerOptions),
    iconBefore: CustomizeIcon,
    options: {
      width: 272,
      height: 184,
      render: ({
        dispatchCommand
      }) => /*#__PURE__*/React.createElement(DividerOptions, {
        style: ruleAttrs.style,
        weight: ruleAttrs.weight,
        onStyleChange: style => {
          var _api$analytics;
          return dispatchCommand(updateHorizontalRuleStyle(style, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions));
        },
        onWeightChange: weight => {
          var _api$analytics2;
          return dispatchCommand(updateHorizontalRuleWeight(weight, api === null || api === void 0 ? 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(color => color.value === currentColor) || {
      label: formatMessage(ruleMessages.customDividerColor),
      value: currentColor,
      border: dividerColorPalette[0].border
    },
    options: dividerColorPalette,
    cols: 10,
    hexToPaletteColor: color => color === "var(--ds-border, #0B120E24)" ? color : hexToEditorTextPaletteColor(color),
    paletteColorTooltipMessages: dividerPaletteTooltipMessages,
    onChange: option => {
      var _api$analytics3;
      return updateHorizontalRuleColor(option.value, api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions);
    }
  }, {
    type: 'separator',
    fullHeight: true
  }];
  const overflowMenuItems = [{
    type: 'overflow-dropdown',
    options: [{
      title: formatMessage(commonMessages.copyToClipboard),
      icon: /*#__PURE__*/React.createElement(CopyIcon, {
        label: ""
      }),
      onClick: () => {
        var _api$core, _api$floatingToolbar;
        api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? 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)
    }, {
      title: formatMessage(commonMessages.delete),
      icon: /*#__PURE__*/React.createElement(DeleteIcon, {
        label: ""
      }),
      onClick: removeHorizontalRule(api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions),
      ...hoverDecorationProps()
    }]
  }];
  items.push(...overflowMenuItems);
  return items;
};
export const getToolbarConfig = (state, intl, api) => {
  const {
    formatMessage
  } = intl;
  const {
    selection
  } = state;
  const {
    rule
  } = state.schema.nodes;
  const ruleNode = findSelectedNodeOfType(state.schema.nodes.rule)(state.selection);
  if (!ruleNode) {
    return undefined;
  }
  const getDomRef = editorView => {
    const domAtPos = editorView.domAtPos.bind(editorView);
    const element = findDomRefAtPos(selection.from, domAtPos);
    return element;
  };
  return {
    title: formatMessage(ruleMessages.dividerFloatingControls),
    getDomRef,
    nodeType: [rule],
    items: getToolbarItems(formatMessage, rule, ruleNode.node.attrs, api),
    scrollable: true
  };
};