81 lines
2.4 KiB
JavaScript
81 lines
2.4 KiB
JavaScript
import { UploadOutlined } from "@ant-design/icons";
|
|
import { Editor } from "@tinymce/tinymce-react";
|
|
import { Button, Card, Input, Select, Upload } from "antd";
|
|
import React from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
export default function EmailOverlayComponent({
|
|
messageOptions,
|
|
handleConfigChange,
|
|
handleToChange,
|
|
handleHtmlChange,
|
|
handleUpload,
|
|
handleFileRemove,
|
|
}) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<div>
|
|
To:
|
|
<Select
|
|
name="to"
|
|
mode="tags"
|
|
value={messageOptions.to}
|
|
//style={{ width: "100%" }}
|
|
onChange={handleToChange}
|
|
tokenSeparators={[",", ";"]}
|
|
/>
|
|
CC:
|
|
<Select
|
|
value={messageOptions.cc}
|
|
mode="tags"
|
|
onChange={(value) => handleConfigChange("cc", value)}
|
|
name="cc"
|
|
tokenSeparators={[",", ";"]}
|
|
/>
|
|
Subject:
|
|
<Input
|
|
value={messageOptions.subject}
|
|
onChange={(e) => handleConfigChange("subject", e.target.value)}
|
|
name="subject"
|
|
/>
|
|
<div style={{ color: "red" }}>
|
|
DEVELOPER NOTE: Any edits made in the editor below will not be sent or
|
|
saved due to css inlining issues.
|
|
</div>
|
|
<Editor
|
|
value={messageOptions.html}
|
|
apiKey="f3s2mjsd77ya5qvqkee9vgh612cm6h41e85efqakn2d0kknk"
|
|
init={{
|
|
height: 500,
|
|
//menubar: false,
|
|
encoding: "raw",
|
|
extended_valid_elements: "span",
|
|
//entity_encoding: "raw",
|
|
plugins: [
|
|
"advlist autolink lists link image charmap print preview anchor",
|
|
"searchreplace visualblocks code fullscreen",
|
|
"insertdatetime media table paste code help wordcount",
|
|
],
|
|
toolbar:
|
|
"undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help",
|
|
}}
|
|
onEditorChange={handleHtmlChange}
|
|
/>
|
|
<Card title={t("emails.labels.attachments")}>
|
|
<Upload
|
|
fileList={messageOptions.fileList}
|
|
beforeUpload={handleUpload}
|
|
onRemove={handleFileRemove}
|
|
multiple
|
|
listType="picture-card"
|
|
style={{ width: "100%" }}
|
|
>
|
|
<Button>
|
|
<UploadOutlined /> Upload
|
|
</Button>
|
|
</Upload>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|