@trap_stevo/legendarybuilderproreact-ui/dist/HUDComponents/HUDEmailTextEditor.js

The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton

import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
var _excluded = ["modules", "formats", "placeholder", "inputContent", "onEditorUpdate", "editorContainerSettings", "editorSendButtonConfigurationSettings", "editorSendButtonTitleConfigurationSettings", "setSendButtonTitleProcessIndicator", "sendButtonTitleProcessIndicator", "sendButtonVisible", "sendButtonAction", "signedUser"];
import _regeneratorRuntime from "@babel/runtime/regenerator";
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; }
/*

     Created by Hassan Steven Compton.
     
     March 7, 2024.

*/
import React from 'react';
import { useState, useEffect } from 'react';
import ReactQuill, { Quill } from "react-quill";
import { HUDUniversalHUDUtilityManager } from "../HUDManagers/HUDUniversalHUDUtilityManager.js";
import "../HUDStyles/emailerFontSizes.css";
import "react-quill/dist/quill.snow.css";
import HUDTyper from "./HUDTyper.js";
function HUDEmailTextEditor(editorConfigurationSettings) {
  useEffect(function () {
    var Size = Quill["import"]('attributors/style/size');
    Size.whitelist = ['8pt', '9pt', '10pt', '11pt', '12pt', '14pt', '16pt', '18pt', '20pt', '22pt', '24pt', '26pt', '28pt', '36pt', '48pt', '72pt', '96pt'];
    Quill.register(Size, true);
  }, []);
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    sendButtonHover = _useState2[0],
    setSendButtonHover = _useState2[1];
  var _useState3 = useState(""),
    _useState4 = _slicedToArray(_useState3, 2),
    editorHtml = _useState4[0],
    setEditorHtml = _useState4[1];
  var _useState5 = useState(""),
    _useState6 = _slicedToArray(_useState5, 2),
    subject = _useState6[0],
    setSubject = _useState6[1];
  var editorModules = {
    toolbar: [[{
      'header': '1'
    }, {
      'header': '2'
    }, {
      'font': []
    }], [{
      size: ['8pt', '9pt', '10pt', '11pt', '12pt', '14pt', '16pt', '18pt', '20pt', '22pt', '24pt', '26pt', '28pt', '36pt', '48pt', '72pt', '96pt']
    }], ['bold', 'italic', 'underline', 'strike', 'blockquote'], [{
      'list': 'ordered'
    }, {
      'list': 'bullet'
    }, {
      'indent': '-1'
    }, {
      'indent': '+1'
    }], ['link', 'image', 'video'], ['clean']],
    clipboard: {
      matchVisual: false
    }
  };
  var _editorConfigurationS = editorConfigurationSettings.modules,
    modules = _editorConfigurationS === void 0 ? editorModules : _editorConfigurationS,
    formats = editorConfigurationSettings.formats,
    placeholder = editorConfigurationSettings.placeholder,
    inputContent = editorConfigurationSettings.inputContent,
    onEditorUpdate = editorConfigurationSettings.onEditorUpdate,
    editorContainerSettings = editorConfigurationSettings.editorContainerSettings,
    editorSendButtonConfigurationSettings = editorConfigurationSettings.editorSendButtonConfigurationSettings,
    editorSendButtonTitleConfigurationSettings = editorConfigurationSettings.editorSendButtonTitleConfigurationSettings,
    setSendButtonTitleProcessIndicator = editorConfigurationSettings.setSendButtonTitleProcessIndicator,
    _editorConfigurationS2 = editorConfigurationSettings.sendButtonTitleProcessIndicator,
    sendButtonTitleProcessIndicator = _editorConfigurationS2 === void 0 ? "Send" : _editorConfigurationS2,
    _editorConfigurationS3 = editorConfigurationSettings.sendButtonVisible,
    sendButtonVisible = _editorConfigurationS3 === void 0 ? false : _editorConfigurationS3,
    sendButtonAction = editorConfigurationSettings.sendButtonAction,
    signedUser = editorConfigurationSettings.signedUser,
    rest = _objectWithoutProperties(editorConfigurationSettings, _excluded);
  var handleEditorUpdate = function handleEditorUpdate(html) {
    setEditorHtml(html);
    if (onEditorUpdate) {
      onEditorUpdate(html);
    }
    return;
  };
  useEffect(function () {
    if (inputContent) {
      setEditorHtml(inputContent);
    }
    return function () {};
  }, []);
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ReactQuill, _extends({
    style: editorContainerSettings,
    value: editorHtml,
    onChange: handleEditorUpdate,
    modules: modules,
    formats: formats,
    placeholder: placeholder || "Write something..."
  }, rest)), sendButtonVisible && editorHtml.trim() !== "" ? /*#__PURE__*/React.createElement("div", {
    style: {
      position: "relative",
      display: "flex",
      height: "auto",
      width: "calc(100%)",
      borderRadius: "1rem",
      marginBottom: "0.69rem",
      marginLeft: "1rem",
      marginTop: "3rem"
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: _objectSpread({
      position: "relative",
      display: "flex",
      background: sendButtonHover ? "#cc0e00" : "rgba(0, 0, 0, 1)",
      transition: "background 1.69s ease-in, scale 0.269s ease-in",
      scale: sendButtonHover ? "1.4969" : "1",
      height: "auto",
      width: "auto",
      borderRadius: "1rem",
      marginBottom: "0.69rem",
      marginLeft: "1rem",
      marginTop: "0.69rem"
    }, editorSendButtonConfigurationSettings),
    onMouseLeave: function onMouseLeave() {
      setSendButtonHover(false);
      return;
    },
    onMouseEnter: function onMouseEnter() {
      setSendButtonHover(true);
      return;
    },
    onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            setSendButtonHover(false);
            if (!(sendButtonAction !== undefined)) {
              _context.next = 4;
              break;
            }
            sendButtonAction(editorHTML);
            return _context.abrupt("return");
          case 4:
            return _context.abrupt("return");
          case 5:
          case "end":
            return _context.stop();
        }
      }, _callee);
    }))
  }, /*#__PURE__*/React.createElement("label", {
    style: _objectSpread({
      position: "relative",
      display: "flex",
      fontWeight: sendButtonHover ? "1169" : "869",
      transition: "font-size 0.869s ease-in-out",
      fontFamily: "ModeNine",
      fontSize: sendButtonHover ? "1.069rem" : "0.969rem",
      userSelect: "none",
      color: sendButtonHover ? "rgba(255, 255, 255, 1)" : "rgba(247, 247, 247, 1)",
      marginBottom: "0.569rem",
      marginRight: "2.569rem",
      marginLeft: "2.569rem",
      marginTop: "0.569rem"
    }, editorSendButtonTitleConfigurationSettings)
  }, /*#__PURE__*/React.createElement(HUDTyper, {
    speed: 7
  }, sendButtonTitleProcessIndicator ? sendButtonTitleProcessIndicator : "Send")))) : /*#__PURE__*/React.createElement(React.Fragment, null));
}
;
export default HUDEmailTextEditor;