@music-loopy/loops/lib/components/RichText/editor.js

A React component library for Music Loopy Applications and websites

"use strict";

exports.__esModule = true;
exports["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _draftJs = require("draft-js");
var _reactDraftWysiwyg = require("react-draft-wysiwyg");
require("react-draft-wysiwyg/dist/react-draft-wysiwyg.css");
var _excluded = ["value", "onChange", "color", "rows", "placeholder"];
var _templateObject;
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
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; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
function _taggedTemplateLiteralLoose(e, t) { return t || (t = e.slice(0)), e.raw = t, e; }
var RichTextToolbar = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  \n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n  min-height: ", "em;\n  .rdw-editor-wrapper{\n    display: flex;\n    flex-wrap: wrap;\n    overflow: scroll;\n    width: 100%;\n    max-width: 100%;\n  }\n  .public-DraftEditor-content{\n    overflow-wrap: anywhere;\n  }\n  .rdw-editor-toolbar{\n    background: ", ";\n    border: none;\n    transition: max-height 0.25s ease-in-out;\n    max-height: 0vh;\n    overflow: hidden;\n    padding:0;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    ", "\n  }\n .rdw-option-wrapper {\n    border: 1px solid #F1F1F1;\n    padding: 10px;\n    width: 2.5em;\n    height: 2.5em;\n    border-radius: 2px;\n    margin: 0 4px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    background: white;\n    text-transform: capitalize;\n}\n.rdw-block-dropdown {\n    width: 110px;\n    font-size: 14px;\n    a{\n        color: #2d3134;\n        text-decoration: none;\n    }\n    \n}\n.rdw-dropdown-selectedtext{\n    color: ", ";\n        text-decoration: none;\n}\n.rdw-block-dropdown, .rdw-dropdownoption-default{\n    font-size: 14px;\n    color: ", ";\n}\n\n.rdw-editor-main{\n    padding: 15px;\n    min-height: 20vh;\n    width: 100%;\n    background:  ", ";\n    color:  ", ";\n}\n"])), function (props) {
  return props.rows * 1.5;
}, function (props) {
  var _props$color;
  return props.theme.colors[(props === null || props === void 0 ? void 0 : (_props$color = props.color) === null || _props$color === void 0 ? void 0 : _props$color.background) || 'primary'].color;
}, function (props) {
  return props.isFocused && "\n     min-height: 10vh;\n     max-height: 50vh;\n    padding: 0.5em;\n\n    overflow: auto;\n    ";
}, function (props) {
  return props.theme.colors.darkGrey.color;
}, function (props) {
  return props.theme.colors.darkGrey.color;
}, function (props) {
  var _props$color2;
  return props.theme.colors[(props === null || props === void 0 ? void 0 : (_props$color2 = props.color) === null || _props$color2 === void 0 ? void 0 : _props$color2.background) || 'primary'].color;
}, function (props) {
  var _props$color3;
  return props.theme.colors[(props === null || props === void 0 ? void 0 : (_props$color3 = props.color) === null || _props$color3 === void 0 ? void 0 : _props$color3.text) || 'darkGrey'].color;
});
var RichTextInput = function RichTextInput(_ref) {
  var value = _ref.value,
    onChange = _ref.onChange,
    color = _ref.color,
    rows = _ref.rows,
    placeholder = _ref.placeholder,
    props = _objectWithoutPropertiesLoose(_ref, _excluded);
  var _useState = (0, _react.useState)(function () {
      return value ? _draftJs.EditorState.createWithContent((0, _draftJs.convertFromRaw)(JSON.parse(value))) : _draftJs.EditorState.createEmpty();
    }),
    editorState = _useState[0],
    setEditorState = _useState[1];
  var _useState2 = (0, _react.useState)(false),
    isFocused = _useState2[0],
    setIsFocused = _useState2[1];
  var handleEditorChange = function handleEditorChange(newEditorState) {
    setEditorState(newEditorState);
    onChange(JSON.stringify((0, _draftJs.convertToRaw)(newEditorState.getCurrentContent())));
  };
  var handleEditorFocus = function handleEditorFocus() {
    setIsFocused(true);
  };
  var handleEditorBlur = function handleEditorBlur() {
    setIsFocused(false);
  };
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(RichTextToolbar, {
    color: color,
    isFocused: isFocused,
    rows: rows
  }, /*#__PURE__*/_react["default"].createElement(_reactDraftWysiwyg.Editor, _extends({
    onFocus: handleEditorFocus,
    onBlur: handleEditorBlur,
    editorState: editorState,
    onEditorStateChange: handleEditorChange,
    placeholder: placeholder,
    toolbar: {
      options: ['inline', 'blockType', 'fontSize', 'fontFamily', 'list', 'textAlign', 'colorPicker', 'link', 'embedded', 'emoji', 'image', 'remove', 'history'],
      inline: {
        inDropdown: true
      },
      list: {
        inDropdown: true
      },
      textAlign: {
        inDropdown: true
      },
      link: {
        inDropdown: true
      },
      history: {
        inDropdown: true
      },
      fontFamily: {
        options: ['Arial', 'Georgia', 'Impact', 'Tahoma', 'Times New Roman', 'Verdana'],
        className: undefined,
        component: undefined,
        dropdownClassName: undefined
      },
      fontSize: {
        options: [10, 12, 14, 16, 18, 24, 30, 36, 48, 60, 72, 96],
        className: undefined,
        component: undefined,
        dropdownClassName: undefined
      }
    }
  }, props))));
};
var _default = exports["default"] = RichTextInput;
module.exports = exports.default;