@mirrormedia/lilith-draft-editor/lib/draft-js/buttons/background-color.js

## Installation

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.BackgroundColorButton = BackgroundColorButton;

var _react = _interopRequireWildcard(require("react"));

var _modals = require("@keystone-ui/modals");

var _draftJs = require("draft-js");

var _fields = require("@keystone-ui/fields");

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _modifier = require("../modifier");

var _const = require("../const");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

const ColorHexInput = (0, _styledComponents.default)(_fields.TextInput)`
  font-family: Georgia, serif;
  margin-right: 10px;
  padding: 10px;
`;

function BackgroundColorButton(props) {
  const {
    isActive,
    editorState,
    onChange,
    className
  } = props;
  const [toShowColorInput, setToShowColorInput] = (0, _react.useState)(false);
  const [colorValue, setColorValue] = (0, _react.useState)('');

  const promptForColor = e => {
    e.preventDefault();
    const selection = editorState.getSelection();

    if (!selection.isCollapsed()) {
      setToShowColorInput(true);
    }
  };

  const confirmColor = () => {
    const selection = editorState.getSelection();
    const contentState = editorState.getCurrentContent();

    let newContentState = _modifier.Modifier.removeInlineStyleByPrefix(contentState, selection, _const.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR);

    if (colorValue) {
      newContentState = _modifier.Modifier.applyInlineStyle(newContentState, selection, _const.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR + colorValue);
    }

    onChange(_draftJs.EditorState.push(editorState, newContentState, 'change-inline-style'));
    setToShowColorInput(false);
    setColorValue('');
  };

  const onColorInputKeyDown = e => {
    if (e.which === 13) {
      e.preventDefault();
      confirmColor();
    }
  };

  const removeColor = () => {
    const selection = editorState.getSelection();

    if (!selection.isCollapsed()) {
      const contentState = editorState.getCurrentContent();

      const newContentState = _modifier.Modifier.removeInlineStyleByPrefix(contentState, selection, _const.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR);

      onChange(_draftJs.EditorState.push(editorState, newContentState, 'change-inline-style'));
    }

    setToShowColorInput(false);
    setColorValue('');
  };

  const colorInput = /*#__PURE__*/_react.default.createElement(_modals.AlertDialog, {
    title: "Hex Color Code (#ffffff)",
    isOpen: toShowColorInput,
    actions: {
      cancel: {
        label: 'Cancel',
        action: removeColor
      },
      confirm: {
        label: 'Confirm',
        action: confirmColor
      }
    }
  }, /*#__PURE__*/_react.default.createElement(ColorHexInput, {
    onChange: e => setColorValue(e.target.value),
    type: "text",
    value: colorValue,
    onKeyDown: onColorInputKeyDown
  }));

  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, colorInput, /*#__PURE__*/_react.default.createElement("div", {
    className: className,
    onMouseDown: isActive ? removeColor : promptForColor
  }, /*#__PURE__*/_react.default.createElement("svg", {
    width: "16",
    height: "14",
    viewBox: "0 0 16 14",
    fill: "none",
    xmlns: "http://www.w3.org/2000/svg"
  }, /*#__PURE__*/_react.default.createElement("path", {
    d: "M3.74443 8.75V6.78945C3.74443 6.37109 3.98306 5.98008 4.34542 5.73125L12.3911 0.229633C12.6091 0.0804726 12.8477 0 13.1453 0C13.4811 0 13.8022 0.124113 14.0409 0.345078L15.6553 1.84242C15.8939 2.06336 16 2.36305 16 2.67531C16 2.92578 15.9411 3.14727 15.779 3.37422L9.85159 10.8418C9.5835 11.1781 9.1357 11.375 8.71147 11.375H6.57264L5.85086 12.0695C5.4826 12.4113 4.8875 12.4113 4.51924 12.0695L3.02265 10.6805C2.65439 10.3387 2.65439 9.78633 3.02265 9.44453L3.74443 8.75ZM13.9466 2.73219L13.0834 1.9302L6.74646 6.26172L9.25354 8.58867L13.9466 2.73219ZM0.207107 12.7504L2.064 11.0277L4.14509 12.9582L3.23182 13.784C3.09925 13.9316 2.91954 14 2.73099 14H0.707052C0.3167 14 0 13.7074 0 13.3438V13.2152C0 13.0184 0.0745351 12.8734 0.207107 12.7504Z",
    fill: isActive ? '#ED8B00' : '#6b7280'
  })), /*#__PURE__*/_react.default.createElement("span", null, " Highlight")));
}