-
-
+
+ {isRichText &&
}
+
{/*
*/}
-
}
- placeholder={
}
- ErrorBoundary={LexicalErrorBoundary}
- />
+ {isRichText ? (
+
} placeholder={
} ErrorBoundary={LexicalErrorBoundary} />
+ ) : (
+
} ErrorBoundary={LexicalErrorBoundary} />
+ )}
{import.meta.env.DEV &&
}
@@ -72,6 +101,7 @@ export default function Editor() {
+
diff --git a/src/components/LexicalEditor/plugins/ToolbarPlugin.jsx b/src/components/LexicalEditor/plugins/ToolbarPlugin.jsx
index 52aa8a0..16c22c3 100644
--- a/src/components/LexicalEditor/plugins/ToolbarPlugin.jsx
+++ b/src/components/LexicalEditor/plugins/ToolbarPlugin.jsx
@@ -48,6 +48,7 @@ const supportedBlockTypes = new Set([
"code",
"h1",
"h2",
+ "h3",
"ul",
"ol"
]);
@@ -346,6 +347,18 @@ function BlockOptionsDropdownList({
}
setShowBlockOptionsDropDown(false);
};
+ const formatSmallHeading3 = () => {
+ if (blockType !== "h3") {
+ editor.update(() => {
+ const selection = $getSelection();
+
+ if ($isRangeSelection(selection)) {
+ $wrapNodes(selection, () => $createHeadingNode("h3"));
+ }
+ });
+ }
+ setShowBlockOptionsDropDown(false);
+ };
const formatBulletList = () => {
if (blockType !== "ul") {
@@ -408,6 +421,11 @@ function BlockOptionsDropdownList({
Small Heading
{blockType === "h2" &&
}
+
}
+ // closeIcon={<>
}
open={open}
mask={false}
maskClosable={false}
diff --git a/src/views/Conversations/Online/Input/EmailEditorPopup.jsx b/src/views/Conversations/Online/Input/EmailEditorPopup.jsx
new file mode 100644
index 0000000..e0fe064
--- /dev/null
+++ b/src/views/Conversations/Online/Input/EmailEditorPopup.jsx
@@ -0,0 +1,187 @@
+import { createContext, useEffect, useState } from 'react';
+import { Button, Form, Input, Flex, Checkbox, Switch, Mentions, Popover } from 'antd';
+import Modal from '@dckj/react-better-modal';
+import '@dckj/react-better-modal/dist/index.css';
+
+import LexicalEditor from '@/components/LexicalEditor';
+
+import { $getRoot, $getSelection, } from 'lexical';
+import {$generateHtmlFromNodes} from '@lexical/html';
+
+// import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
+// import { LexicalComposer } from '@lexical/react/LexicalComposer';
+// import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+// import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+// import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+// import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
+
+// const theme = {
+// // Theme styling goes here
+// //...
+// };
+
+// // Catch any errors that occur during Lexical updates and log them
+// // or throw them as needed. If you don't throw them, Lexical will
+// // try to recover gracefully without losing user data.
+// function onError(error) {
+// console.error(error);
+// }
+const EmailEditorPopup = ({ open, setOpen, fromEmail, reference, ...props }) => {
+ const [form] = Form.useForm();
+
+ // const [open, setOpen] = useState(false);
+ function onHandleMove(e) {
+ console.log(e, '--->>> onHandleMove');
+ }
+ function onHandleResize(e) {
+ console.log(e, '--->>> onHandleResize');
+ }
+
+ function onHandleOk() {
+ console.log('onOk callback');
+ }
+
+ function onHandleCancel() {
+ console.log('onCancel callback');
+ setOpen(false);
+ }
+ function onStageChange({ state }) {
+ console.log(state);
+ }
+
+ const [isRichText, setIsRichText] = useState(true);
+ const [htmlContent, setHtmlContent] = useState('');
+ const [textContent, setTextContent] = useState('');
+
+ const [showCc, setShowCc] = useState(false);
+ const [showBcc, setShowBcc] = useState(false);
+ const handleShowCc = () => {
+ setShowCc(true);
+ };
+ const handleShowBcc = () => {
+ setShowBcc(true);
+ };
+
+ const handleEditorChange = ({ editorState, html, textContent }) => {
+ // console.log('textContent', textContent);
+ // console.log('html', html);
+ setHtmlContent(html);
+ setTextContent(textContent);
+ form.setFieldValue('content', html);
+ form.setFieldValue('abstract', textContent.substring(0, 20));
+ };
+
+ const onHandleSend = () => {
+ console.log('onSend callback', '\nisRichText', isRichText);
+ console.log(form.getFieldsValue());
+ const body = structuredClone(form.getFieldsValue());
+ body.content = isRichText ? htmlContent : textContent;
+ console.log('body', body);
+ form
+ .validateFields()
+ .then((values) => {})
+ .catch((err) => {});
+
+ form.resetFields();
+
+ // setOpen(false);
+ };
+
+ return (
+ <>
+
}
+ onMove={onHandleMove}
+ onResize={onHandleResize}
+ onCancel={onHandleCancel}
+ // onOk={onHandleOk}
+ onStageChange={onStageChange}
+ footer={
+
+
+
+ {/* */}
+ setIsRichText(!(e.target.checked))}>纯文本
+
+
+
+ );
+};
+export default EmailEditorPopup;
diff --git a/src/views/Conversations/Online/Input/EmailEditorPopup1.jsx b/src/views/Conversations/Online/Input/EmailEditorPopup1.jsx
new file mode 100644
index 0000000..c440567
--- /dev/null
+++ b/src/views/Conversations/Online/Input/EmailEditorPopup1.jsx
@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
+import { Rnd } from 'react-rnd';
+
+const DraggableResizableModal = ({ children }) => {
+ const [width, setWidth] = useState(320);
+ const [height, setHeight] = useState(240);
+ const [x, setX] = useState(300);
+ const [y, setY] = useState(72);
+ const [isMaximized, setIsMaximized] = useState(false);
+
+ const handleMaximize = () => {
+ if (isMaximized) {
+ setWidth(320);
+ setHeight(240);
+ setX(0);
+ setY(0);
+ } else {
+ setWidth(window.innerWidth-20);
+ setHeight(window.innerHeight-20);
+ setX(0);
+ setY(0);
+ }
+
+ setIsMaximized(!isMaximized);
+ };
+
+ const render = (
+
{ setX(d.x); setY(d.y); }}
+ onResizeStop={(e, direction, ref) => {
+ setWidth(ref.style.width);
+ setHeight(ref.style.height);
+ }}
+ >
+
+ {children}
+
+ );
+
+ return ReactDOM.createPortal(
+ render,
+ document.body
+ );
+};
+
+export default DraggableResizableModal;
diff --git a/src/views/Conversations/Online/MessagesWrapper.jsx b/src/views/Conversations/Online/MessagesWrapper.jsx
index a717774..d4655ac 100644
--- a/src/views/Conversations/Online/MessagesWrapper.jsx
+++ b/src/views/Conversations/Online/MessagesWrapper.jsx
@@ -10,6 +10,7 @@ import ConversationNewItem from './ConversationsNewItem';
import emailItem from './Components/emailSent.json';
import emailReItem from './Components/emailRe.json';
import EmailEditor from './Input/EmailEditor';
+import EmailEditorPopup from './Input/EmailEditorPopup';
const MessagesWrapper = ({ updateRead = true, forceGetMessages }) => {
const userId = useAuthStore((state) => state.loginUser.userId);
@@ -127,6 +128,7 @@ const MessagesWrapper = ({ updateRead = true, forceGetMessages }) => {
const [openEmailEditor, setOpenEmailEditor] = useState(false);
const [fromEmail, setFromEmail] = useState('');
+ const [ReferEmailMsg, setReferEmailMsg] = useState('');
const onOpenEditor = (email_addr) => {
setOpenEmailEditor(true);
setFromEmail(email_addr);
@@ -148,6 +150,7 @@ const MessagesWrapper = ({ updateRead = true, forceGetMessages }) => {
getMoreMessages,
loadNextPage: currentConversation?.loadNextPage ?? true,
onOpenEditor,
+ setRefernce: setReferEmailMsg,
}}
/>
{
}}
onCancel={() => setNewChatModalVisible(false)}
/>
-
-
+ {/* */}
+
+
);
};
export default MessagesWrapper;
diff --git a/src/views/Conversations/Online/ReplyWrapper.jsx b/src/views/Conversations/Online/ReplyWrapper.jsx
index a7c578f..fdbff58 100644
--- a/src/views/Conversations/Online/ReplyWrapper.jsx
+++ b/src/views/Conversations/Online/ReplyWrapper.jsx
@@ -2,7 +2,7 @@ import { Children, createContext, useEffect, useState } from 'react';
import { Tabs } from 'antd';
import { MailFilled, MailOutlined, WhatsAppOutlined } from '@ant-design/icons';
import InputComposer from './Input/InputComposer';
-import EmailComposer from './Input/EmailComposer';
+import EmailComposer from './Input/EmailChannelTab';
import { WABIcon } from '@/components/Icons';
import useConversationStore from '@/stores/ConversationStore';
import { useShallow } from 'zustand/react/shallow';
diff --git a/tailwind.config.js b/tailwind.config.js
index 097e739..d7d5084 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -29,6 +29,10 @@ export default {
// gridTemplateColumns: {
// 'responsive':repeat(autofill,minmax('300px',1fr))
// }
+ boxShadow: {
+ 'heavy': '0 1px 7px 1px rgba(0, 0, 0, 0.3)',
+ '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
+ }
},
},
plugins: [],