1

package.json

@@ -13,18 +13,22 @@
     "@dckj/react-better-modal": "^0.1.2",
     "@lexical/react": "^0.20.0",
     "@vonage/client-sdk": "^1.7.2",
+    "@yoopta/email-builder": "^4.9.2",
     "antd": "^5.22.2",
     "dayjs": "^1.11.13",
     "dingtalk-jsapi": "^3.0.41",
     "emoji-picker-react": "^4.12.0",
     "lexical": "^0.20.0",
     "react": "^18.3.1",
+    "react-chat-elements": "^12.0.17",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.28.0",
-    "zustand": "^4.5.5",
-    "react-chat-elements": "^12.0.17",
     "rxjs": "^7.8.1",
-    "uuid": "^9.0.1"
+    "slate": "^0.110.2",
+    "slate-dom": "^0.111.0",
+    "slate-react": "^0.111.0",
+    "uuid": "^9.0.1",
+    "zustand": "^4.5.5"
   },
   "devDependencies": {
     "@types/react": "^18.3.12",

src/views/Conversations/Online/Input/Editor/EmailBuilder.jsx

@@ -0,0 +1,83 @@
+import { useEffect, useState, useMemo } from 'react'
+import EmailBuilder, {
+  createYooptaEmailEditor,
+  // type EmailTemplateOptions,
+} from '@yoopta/email-builder'
+
+const templateOptions = {
+  head: {
+    styles: [
+      {
+        id: 'font',
+        content: `body { font-family: Verdana, sans-serif; }`,
+      },
+    ],
+    meta: [
+      { content: 'width=device-width', name: 'viewport' },
+      { charset: 'UTF-8' },
+      { content: 'IE=edge', httpEquiv: 'X-UA-Compatible' },
+      { content: 'telephone=no,address=no,email=no,date=no,url=no', name: 'format-detection' },
+      { content: 'light', name: 'color-scheme' },
+    ],
+  },
+  body: {
+    attrs: {
+      style: {
+        backgroundColor: '#fafafa',
+        width: '900px',
+        margin: '0 auto',
+      },
+    },
+  },
+  container: {
+    attrs: {
+      style: {
+        width: 800,
+        margin: '0 auto',
+      },
+    },
+  },
+}
+
+function EmailBuilderC() {
+  const editor = useMemo(() => createYooptaEmailEditor({ template: templateOptions }), [])
+  const [value, setValue] = useState({})
+
+  const uploadImageToServer = async () => {}
+  const uploadVideoToServer = async () => {}
+  const uploadPosterToServer = async () => {}
+  const uploadFileToServer = async () => {}
+
+  // media upload handlers
+  const mediaUploaders = {
+    image: {
+      upload: async (file) => {
+        const url = await uploadImageToServer(file)
+        return url
+      },
+    },
+    video: {
+      upload: async (file) => {
+        const url = await uploadVideoToServer(file)
+        return url
+      },
+      uploadPoster: async (file) => {
+        const url = await uploadPosterToServer(file)
+        return url
+      },
+    },
+    file: {
+      upload: async (file) => {
+        const url = await uploadFileToServer(file)
+        return url
+      },
+    },
+  }
+
+  return (
+    <div className='h-96'>
+      <EmailBuilder view='editor' className='h-96' editor={editor} value={value} onChange={setValue} media={mediaUploaders} header={null} autoFocus={true} placeholder='Write your email here...' />
+    </div>
+  )
+}
+export default EmailBuilderC

src/views/Conversations/Online/Input/EmailEditorPopup.jsx

@@ -17,6 +17,7 @@ import { sentMsgTypeMapped,   } from '@/channel/bubbleMsgUtils';
 import { useEmailDetail } from '@/hooks/useEmail';
 import useSnippetStore from '@/stores/SnippetStore'
 import { useOrderStore } from '@/stores/OrderStore'
+import EmailBuilderC from './Editor/EmailBuilder';
 
 // 禁止上传的附件类型
 // .application, .exe, .app
@@ -513,7 +514,8 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, fromOrder, toEma
               <Input />
             </Form.Item>
           </Form>
-          <LexicalEditor {...{ isRichText }} onChange={handleEditorChange} defaultValue={initialContent} />
+          {/* <LexicalEditor {...{ isRichText }} onChange={handleEditorChange} defaultValue={initialContent} /> */}
+          <EmailBuilderC />
         </DnDModal>
 
       </ConfigProvider>