├── public
    ├── robots.txt
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── index.html
├── .gitignore
├── src
    ├── reportWebVitals.js
    ├── index.js
    ├── MyEmailEditor
    │   ├── Header.js
    │   ├── index.js
    │   └── defaultBlockList.json
    └── index.css
├── package.json
└── README.md


/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhugenmin/react-email-editor/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhugenmin/react-email-editor/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhugenmin/react-email-editor/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
 1 | const reportWebVitals = onPerfEntry => {
 2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 3 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 4 |       getCLS(onPerfEntry);
 5 |       getFID(onPerfEntry);
 6 |       getFCP(onPerfEntry);
 7 |       getLCP(onPerfEntry);
 8 |       getTTFB(onPerfEntry);
 9 |     });
10 |   }
11 | };
12 | 
13 | export default reportWebVitals;
14 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom/client";
 3 | import "./index.css";
 4 | import MyEmailEditor from "./MyEmailEditor";
 5 | import reportWebVitals from "./reportWebVitals";
 6 | 
 7 | const root = ReactDOM.createRoot(document.getElementById("root"));
 8 | root.render(
 9 |   <React.StrictMode>
10 |     <MyEmailEditor />
11 |   </React.StrictMode>
12 | );
13 | 
14 | // If you want to start measuring performance in your app, pass a function
15 | // to log results (for example: reportWebVitals(console.log))
16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17 | reportWebVitals();
18 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-email-editor",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@editex/react-email-editor": "^1.0.7",
 7 |     "cra-template": "1.2.0",
 8 |     "react": "^18.2.0",
 9 |     "react-dom": "^18.2.0",
10 |     "react-scripts": "5.0.1"
11 |   },
12 |   "scripts": {
13 |     "start": "react-scripts start",
14 |     "build": "react-scripts build",
15 |     "test": "react-scripts test",
16 |     "eject": "react-scripts eject"
17 |   },
18 |   "eslintConfig": {
19 |     "extends": [
20 |       "react-app",
21 |       "react-app/jest"
22 |     ]
23 |   },
24 |   "browserslist": {
25 |     "production": [
26 |       ">0.2%",
27 |       "not dead",
28 |       "not op_mini all"
29 |     ],
30 |     "development": [
31 |       "last 1 chrome version",
32 |       "last 1 firefox version",
33 |       "last 1 safari version"
34 |     ]
35 |   },
36 |   "devDependencies": {
37 |     "web-vitals": "^3.4.0"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/src/MyEmailEditor/Header.js:
--------------------------------------------------------------------------------
 1 | const Header = (props) => {
 2 |   const { emailEditorEl, setLanguage } = props;
 3 | 
 4 |   const exportHTML = () => {
 5 |     const html = emailEditorEl.current.exportHtml();
 6 |     const blob = new Blob([html], { type: "text/html" });
 7 |     const a = document.createElement("a");
 8 |     a.download = "email.html";
 9 |     a.href = URL.createObjectURL(blob);
10 |     a.click();
11 |   };
12 | 
13 |   const changeLanguage = (language) => () => {
14 |     setLanguage(language);
15 |   };
16 | 
17 |   return (
18 |     <div className="dashboard-header">
19 |       <div className="dashboard-header-title">Email Editor</div>
20 |       <div className="dashboard-header-feature">
21 |         <div className="dashboard-header-language">
22 |           <span onClick={changeLanguage("en")}>EN</span>/<span onClick={changeLanguage("zh")}>中文</span>/
23 |           <span onClick={changeLanguage("zh_TW")}>繁體中文</span>
24 |         </div>
25 |         <button className="dashboard-header-subtitle" onClick={exportHTML}>
26 |           export html
27 |         </button>
28 |       </div>
29 |     </div>
30 |   );
31 | };
32 | 
33 | export default Header;
34 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | html,
 2 | body,
 3 | #root {
 4 |   width: 100%;
 5 |   height: 100%;
 6 | }
 7 | 
 8 | body {
 9 |   margin: 0;
10 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
11 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
12 |     sans-serif;
13 |   -webkit-font-smoothing: antialiased;
14 |   -moz-osx-font-smoothing: grayscale;
15 | }
16 | 
17 | code {
18 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
19 |     monospace;
20 | }
21 | 
22 | .dashboard {
23 |   display: flex;
24 |   flex-direction: column;
25 |   height: 100%;
26 | }
27 | 
28 | .dashboard-content {
29 |   flex: 1;
30 |   overflow: auto;
31 | }
32 | 
33 | .dashboard-header {
34 |   padding: 8px 12px;
35 |   background-color: #374151;
36 |   display: flex;
37 |   align-items: center;
38 |   justify-content: space-between;
39 | }
40 | 
41 | .dashboard-header-title {
42 |   color: #fff;
43 |   font-size: 24px;
44 |   font-weight: 700;
45 |   font-family: 'Inter', sans-serif;
46 | }
47 | 
48 | .dashboard-header-subtitle {
49 |   padding: 8px 16px;
50 |   color: #fff;
51 |   font-size: 12px;
52 |   font-weight: 600;
53 |   border-radius: 34px;
54 |   background-color: #2563eb;
55 |   transition: all 0.3s;
56 |   border: none;
57 |   cursor: pointer;
58 | }
59 | 
60 | .dashboard-header-subtitle:hover {
61 |   background-color: #3b82f6;
62 | }
63 | 
64 | .dashboard-header-feature {
65 |   display: flex;
66 |   align-items: center;
67 |   gap: 24px;
68 | }
69 | 
70 | .dashboard-header-language {
71 |   color: #fff;
72 |   font-size: 14px;
73 | }
74 | 
75 | .dashboard-header-language span {
76 |   cursor: pointer;
77 | }
78 | 
79 | .dashboard-header-language span:hover {
80 |   text-decoration: underline;
81 | }


--------------------------------------------------------------------------------
/src/MyEmailEditor/index.js:
--------------------------------------------------------------------------------
 1 | import EmailEditor from "@editex/react-email-editor";
 2 | import { useRef, useState } from "react";
 3 | import defaultBlockList from "./defaultBlockList.json";
 4 | import Header from "./Header";
 5 | import { useEffect } from "react";
 6 | 
 7 | function Dashboard() {
 8 |   const emailEditorRef = useRef(null);
 9 |   const [emailData, setEmailData] = useState(null);
10 |   const [language, setLanguage] = useState("en");
11 | 
12 |   useEffect(() => {
13 |     setTimeout(() => {
14 |       setEmailData(defaultBlockList);
15 |     }, 300);
16 |   }, []);
17 | 
18 |   return (
19 |     <div className="dashboard">
20 |       <Header emailEditorEl={emailEditorRef} setLanguage={setLanguage} />
21 |       <div className="dashboard-content">
22 |         {emailData && (
23 |           <EmailEditor
24 |             ref={emailEditorRef}
25 |             defaultBlockList={emailData}
26 |             language={language}
27 |             customLanguageLibraries={{
28 |               en: {
29 |                 column: "Column",
30 |                 columns: "Columns",
31 |               },
32 |               zh: {
33 |                 column: "列",
34 |                 columns: "列",
35 |               },
36 |               zh_TW: {
37 |                 drag_block_here: "請將模組拖曳到此處",
38 |                 blocks: "模組",
39 |                 photos: "圖片",
40 |                 loading: "載入中...",
41 |                 content: "內容",
42 |                 body_settings: "郵件主旨設定",
43 |                 pre_header: "預標題",
44 |                 pre_header_description: "預標題是在收件匣中查看電子郵件時跟隨主題行的簡短摘要文字。",
45 |                 confirm: "確認",
46 |                 cancel: "取消",
47 |                 // ........
48 |               },
49 |             }}
50 |           />
51 |         )}
52 |       </div>
53 |     </div>
54 |   );
55 | }
56 | 
57 | export default Dashboard;
58 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>React App</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Email Editor
  2 | 
  3 | Email Editor is a React component that allows users to create emails using a drag-and-drop interface.
  4 | 
  5 | ## Live Demo
  6 | 
  7 | http://emaileditordnd.netlify.app/
  8 | 
  9 | ## Installation
 10 | 
 11 | To use Email Editor, simply run the following command:
 12 | 
 13 | ```bash
 14 | npm i @editex/react-email-editor
 15 | ```
 16 | 
 17 | ## Usage/Examples
 18 | 
 19 | To use Email Editor in your React project, import the component and include it in your JSX code:
 20 | 
 21 | ### index.js
 22 | 
 23 | ```javascript
 24 | import EmailEditor from "zgm-email-editor";
 25 | import { useEffect, useRef, useState } from "react";
 26 | 
 27 | function MyEmailEditor() {
 28 |   const emailEditorRef = useRef(null);
 29 |   const [emailData, setEmailData] = useState(null);
 30 | 
 31 |   useEffect(() => {
 32 |     setTimeout(() => {
 33 |       setEmailData([]);
 34 |     }, 1000);
 35 |   }, []);
 36 | 
 37 |   const exportHtml = () => {
 38 |     emailEditorRef.current.exportHtml();
 39 |   };
 40 | 
 41 |   const showEmailData = () => {
 42 |     console.log(emailEditorRef.current.blockList);
 43 |   };
 44 | 
 45 |   return (
 46 |     <div class="page">
 47 |       <div className="page-header">
 48 |         <button onClick={exportHtml}>Export HTML</button>
 49 |         <button onClick={showEmailData}>Show email data</button>
 50 |       </div>
 51 |       <div className="page-content">{emailData ? <EmailEditor ref={emailEditorRef} defaultBlockList={emailData} /> : <>Loading....</>}</div>
 52 |     </div>
 53 |   );
 54 | }
 55 | ```
 56 | 
 57 | ### index.js
 58 | 
 59 | ```javascript
 60 | import EmailEditor from "@editex/react-email-editor";
 61 | import { useEffect, useRef, useState } from "react";
 62 | 
 63 | function MyEmailEditor() {
 64 |   const emailEditorRef = useRef(null);
 65 |   const [emailData, setEmailData] = useState(null);
 66 | 
 67 |   useEffect(() => {
 68 |     setTimeout(() => {
 69 |       setEmailData([]);
 70 |     }, 1000);
 71 |   }, []);
 72 | 
 73 |   const exportHtml = () => {
 74 |     const html = emailEditorEl.current.exportHtml();
 75 |     const blob = new Blob([html], { type: "text/html" });
 76 |     const a = document.createElement("a");
 77 |     a.download = "email.html";
 78 |     a.href = URL.createObjectURL(blob);
 79 |     a.click();
 80 |   };
 81 | 
 82 |   const showEmailData = () => {
 83 |     console.log(emailEditorRef.current.blockList);
 84 |   };
 85 | 
 86 |   return (
 87 |     <div class="page">
 88 |       <div className="page-header">
 89 |         <button onClick={exportHtml}>Export HTML</button>
 90 |         <button onClick={showEmailData}>Show email data</button>
 91 |       </div>
 92 |       <div className="page-content">{emailData ? <EmailEditor ref={emailEditorRef} defaultBlockList={emailData} /> : <>Loading....</>}</div>
 93 |     </div>
 94 |   );
 95 | }
 96 | ```
 97 | 
 98 | ### index.css
 99 | 
100 | ```css
101 | .page {
102 |   display: flex;
103 |   flex-direction: column;
104 |   height: 100%;
105 | }
106 | 
107 | .page-header {
108 |   padding: 8px 12px;
109 |   background-color: #374151;
110 |   display: flex;
111 |   align-items: end;
112 |   justify-content: space-between;
113 |   gap: 10px;
114 | }
115 | 
116 | .page-content {
117 |   flex: 1;
118 |   overflow: auto;
119 | }
120 | ```
121 | 
122 | ## Localization
123 | 
124 | This Email Editor component has built-in Chinese and English.
125 | 
126 | This project supports localization for multiple languages. Currently, the following languages are supported:
127 | 
128 | - English(en)
129 | - Chinese(zh)
130 | 
131 | ### Example usage:
132 | 
133 | ```javascript
134 | const MyEmailEditor = () => {
135 |   const [language, setLanguage] = useState("en");
136 | 
137 |   const changeLanguage = (language) => () => {
138 |     setLanguage(language);
139 |   };
140 | 
141 |   return (
142 |     <>
143 |       <div>
144 |         <span onClick={changeLanguage("en")}>EN</span>/<span onClick={changeLanguage("zh")}>中文</span>
145 |       </div>
146 |       <EmailEditor language={language} />
147 |     </>
148 |   );
149 | };
150 | ```
151 | 
152 | #### en.js
153 | 
154 | ```javascript
155 | const en = {
156 |   drag_block_here: "Drag block here",
157 |   blocks: "Blocks",
158 |   photos: "Photos",
159 |   powered_by_pexels: "Powered by Pexels",
160 |   loading: "Loading...",
161 |   content: "Content",
162 |   body_settings: "Theme Settings",
163 |   pre_header: "Pre-header",
164 |   pre_header_description: "The pre-header is a short summary text that follows the subject line when viewing an email in the inbox.",
165 |   confirm: "Confirm",
166 |   cancel: "Cancel",
167 | 
168 |   // column block
169 |   column: "Column",
170 |   columns: "Columns",
171 |   column_settings: "Column Settings",
172 |   column_styles: "Column Styles",
173 |   column_delete: "Delete Column",
174 |   column_delete_desc: "Are you sure you want to delete {{count}} extra columns? ",
175 | 
176 |   // text block
177 |   text: "Text",
178 |   text_content: "This is a text, click to edit text",
179 |   text_settings: "Text Settings",
180 |   text_styles: "Text Styles",
181 |   text_align: "Text Align",
182 | 
183 |   // heading block
184 |   heading: "Heading",
185 |   heading_content: "This is a heading, click to edit heading",
186 |   heading_settings: "Heading Settings",
187 |   heading_type: "Heading Type",
188 | 
189 |   // button block
190 |   button: "Button",
191 |   button_settings: "Button Settings",
192 |   button_action: "Button Action",
193 |   button_styles: "Button Styles",
194 |   button_padding: "Button Padding",
195 | 
196 |   // divider block
197 |   divider: "Divider",
198 |   divider_settings: "Divider Settings",
199 |   divider_type: "Divider Type",
200 |   divider_styles: "Divider Styles",
201 | 
202 |   // image block
203 |   image: "Image",
204 |   image_action: "Image Action",
205 |   image_url: "Image URL",
206 |   image_alt: "Image Alt",
207 |   image_styles: "Image Styles",
208 |   image_settings: "Image Settings",
209 | 
210 |   // social link block
211 |   social_link: "Social Link",
212 |   social_link_settings: "Social Link Settings",
213 |   add_social_link: "Add Social Link",
214 |   social_link_size: "Social Link Size",
215 |   social_links: "Social Links",
216 | 
217 |   // colors
218 |   content_background_color: "Content Background Color",
219 |   background_color: "Background Color",
220 |   text_color: "Text Color",
221 |   email_theme_background_color: "Email Theme Background Color",
222 |   font_color: "Font Color",
223 |   button_color: "Button Color",
224 |   divider_color: "Divider Color",
225 | 
226 |   //styles
227 |   action_type: "Action Type",
228 |   top: "Top",
229 |   right: "Right",
230 |   left: "Left",
231 |   bottom: "Bottom",
232 |   line_height: "Line Height",
233 |   link: "Link",
234 |   link_url: "Link URL",
235 |   padding_settings: "Padding Settings",
236 |   width: "Width",
237 |   height: "Height",
238 |   width_auto: "Width Auto",
239 |   font_size: "Font Size",
240 |   font_family: "Font Family",
241 |   solid: "Solid",
242 |   dotted: "Dotted",
243 |   dashed: "Dashed",
244 |   align: "Align",
245 |   spacing: "Spacing",
246 | };
247 | 
248 | export default en;
249 | ```
250 | 
251 | #### zh.js
252 | 
253 | ```javascript
254 | const zh = {
255 |   drag_block_here: "请将模块拖放到此处",
256 |   blocks: "模块",
257 |   photos: "图片",
258 |   powered_by_pexels: "图片由Pexels提供",
259 |   loading: "加载中...",
260 |   content: "内容",
261 |   body_settings: "邮件主题设置",
262 |   pre_header: "预标题",
263 |   pre_header_description: "预标题是在收件箱中查看电子邮件时跟随主题行的简短摘要文本。",
264 |   confirm: "确认",
265 |   cancel: "取消",
266 | 
267 |   // column block
268 |   column: "列",
269 |   columns: "列排版",
270 |   column_settings: "列设置",
271 |   column_styles: "列样式",
272 |   column_delete: "删除列",
273 |   column_delete_desc: "您确定删除多余的{{count}}列吗？",
274 | 
275 |   //text block
276 |   text: "文本",
277 |   text_content: "这是一个文本，点击修改文本",
278 |   text_settings: "文本设置",
279 |   text_styles: "文本样式",
280 |   text_align: "文本对齐方式",
281 | 
282 |   // heading block
283 |   heading: "标题",
284 |   heading_content: "这是一个标题，点击修改标题",
285 |   heading_settings: "标题设置",
286 |   heading_type: "标题类型",
287 | 
288 |   // button block
289 |   button: "按钮",
290 |   button_settings: "按钮设置",
291 |   button_action: "点击按钮触发",
292 |   button_styles: "按钮样式",
293 |   button_padding: "按钮内边距",
294 | 
295 |   // divider block
296 |   divider: "分割线",
297 |   divider_settings: "分割线设置",
298 |   divider_type: "分割线类型",
299 |   divider_styles: "分割线样式",
300 | 
301 |   // image block
302 |   image: "图片",
303 |   image_settings: "图片设置",
304 |   image_action: "点击图片跳转",
305 |   image_url: "图片URL",
306 |   image_alt: "图片alt",
307 |   image_styles: "图片样式",
308 | 
309 |   // social link block
310 |   social_link: "社交链接",
311 |   add_social_link: "添加社交链接",
312 |   social_link_size: "社交链接大小",
313 |   social_links: "社交链接",
314 |   social_link_settings: "社交链接设置",
315 | 
316 |   // colors
317 |   content_background_color: "内容背景颜色",
318 |   background_color: "背景颜色",
319 |   text_color: "文本颜色",
320 |   email_theme_background_color: "邮件主题色",
321 |   font_color: "字体颜色",
322 |   button_color: "按钮颜色",
323 |   divider_color: "分割线颜色",
324 | 
325 |   // styles
326 |   action_type: "按钮类型",
327 |   top: "上",
328 |   right: "右",
329 |   left: "左",
330 |   bottom: "下",
331 |   line_height: "行高",
332 |   link: "超链接",
333 |   link_url: "超链接URL",
334 |   padding_settings: "内边距设置",
335 |   width_auto: "宽度自适应",
336 |   width: "宽度",
337 |   height: "高度",
338 |   font_size: "字体大小",
339 |   font_family: "字体",
340 |   align: "对齐方式",
341 |   solid: "实线",
342 |   dotted: "虚线（点）",
343 |   dashed: "虚线（破折号）",
344 |   spacing: "间距",
345 | };
346 | 
347 | export default zh;
348 | ```
349 | 
350 | #### Modify en / zh text content
351 | 
352 | ```javascript
353 | const MyEmailEditor = () => {
354 |   const [language, setLanguage] = useState("en");
355 | 
356 |   const changeLanguage = (language) => () => {
357 |     setLanguage(language);
358 |   };
359 | 
360 |   return (
361 |     <>
362 |       <div>
363 |         <span onClick={changeLanguage("en")}>EN</span>/<span onClick={changeLanguage("zh")}>中文</span>
364 |       </div>
365 |       <EmailEditor
366 |         language={language}
367 |         customLanguageLibraries={{
368 |           en: {
369 |             column: "Column",
370 |             columns: "Columns",
371 |           },
372 |           zh: {
373 |             column: "列",
374 |             columns: "列",
375 |           },
376 |         }}
377 |       />
378 |     </>
379 |   );
380 | };
381 | ```
382 | 
383 | ### Custom language
384 | 
385 | To add support for a new language, follow these steps:
386 | 
387 | ```javascript
388 | const MyEmailEditor = () => {
389 |   const [language, setLanguage] = useState("en");
390 | 
391 |   const changeLanguage = (language) => () => {
392 |     setLanguage(language);
393 |   };
394 | 
395 |   return (
396 |     <>
397 |       <div>
398 |         <span onClick={changeLanguage("en")}>EN</span>/<span onClick={changeLanguage("zh")}>中文</span>/
399 |         <span onClick={changeLanguage("zh_TW")}>繁体中文</span>
400 |       </div>
401 |       <EmailEditor
402 |         language={language}
403 |         customLanguageLibraries={{
404 |           en: {
405 |             column: "Column",
406 |             columns: "Columns",
407 |           },
408 |           zh: {
409 |             column: "列",
410 |             columns: "列",
411 |           },
412 |           zh_TW: {
413 |             drag_block_here: "請將模組拖曳到此處",
414 |             blocks: "模組",
415 |             photos: "圖片",
416 |             loading: "載入中...",
417 |             content: "內容",
418 |             body_settings: "郵件主旨設定",
419 |             pre_header: "預標題",
420 |             pre_header_description: "預標題是在收件匣中查看電子郵件時跟隨主題行的簡短摘要文字。",
421 |             confirm: "確認",
422 |             cancel: "取消",
423 |             // ........
424 |           },
425 |         }}
426 |       />
427 |     </>
428 |   );
429 | };
430 | ```
431 | 
432 | ## Features
433 | 
434 | - Drag-and-drop interface for easy email creation
435 | - Customizable email templates
436 | - Support for multiple email clients and devices
437 | - Responsive design for mobile and desktop viewing
438 | 


--------------------------------------------------------------------------------
/src/MyEmailEditor/defaultBlockList.json:
--------------------------------------------------------------------------------
  1 | [
  2 |   {
  3 |     "name": "列",
  4 |     "key": "column",
  5 |     "type": "full",
  6 |     "styles": {
  7 |       "key": "column",
  8 |       "desktop": {
  9 |         "backgroundColor": "transparent",
 10 |         "paddingTop": 0,
 11 |         "paddingLeft": 0,
 12 |         "paddingRight": 0,
 13 |         "paddingBottom": 0,
 14 |         "contentBackground": "#fff"
 15 |       },
 16 |       "mobile": {}
 17 |     },
 18 |     "children": [
 19 |       {
 20 |         "name": "容器",
 21 |         "key": "content",
 22 |         "width": "100%",
 23 |         "styles": {
 24 |           "key": "column",
 25 |           "desktop": {
 26 |             "backgroundColor": "transparent",
 27 |             "paddingTop": 0,
 28 |             "paddingLeft": 0,
 29 |             "paddingRight": 0,
 30 |             "paddingBottom": 0,
 31 |             "contentBackground": "transparent"
 32 |           },
 33 |           "mobile": {}
 34 |         },
 35 |         "children": [
 36 |           {
 37 |             "name": "标题",
 38 |             "key": "heading",
 39 |             "text": "<span style=\"text-align: center;\">Your Company Logo</span>",
 40 |             "type": "h1",
 41 |             "styles": {
 42 |               "desktop": {
 43 |                 "fontSize": 37,
 44 |                 "lineHeight": "140%",
 45 |                 "fontFamily": "sans-serif",
 46 |                 "color": "#000",
 47 |                 "paddingTop": 12,
 48 |                 "paddingBottom": 12,
 49 |                 "paddingLeft": 12,
 50 |                 "paddingRight": 12,
 51 |                 "textAlign": "center",
 52 |                 "fontWeight": "bold"
 53 |               },
 54 |               "mobile": {}
 55 |             },
 56 |             "styleConfig": {
 57 |               "className": "heading-0",
 58 |               "desktop": "font-size:37px;line-height:140%;font-family:sans-serif;color:#000;padding-top:12px;padding-bottom:12px;padding-left:12px;padding-right:12px;text-align:center;",
 59 |               "mobile": ""
 60 |             }
 61 |           },
 62 |           {
 63 |             "name": "文本",
 64 |             "key": "text",
 65 |             "text": "NEW COLLECTION",
 66 |             "styles": {
 67 |               "desktop": {
 68 |                 "fontSize": 10,
 69 |                 "fontFamily": "sans-serif",
 70 |                 "color": "#000",
 71 |                 "lineHeight": "140%",
 72 |                 "paddingTop": 12,
 73 |                 "paddingBottom": 12,
 74 |                 "paddingLeft": 12,
 75 |                 "paddingRight": 12,
 76 |                 "textAlign": "center"
 77 |               },
 78 |               "mobile": {}
 79 |             },
 80 |             "styleConfig": {
 81 |               "className": "text-1",
 82 |               "desktop": "font-size:10px;font-family:sans-serif;color:#000;line-height:140%;padding-top:12px;padding-bottom:12px;padding-left:12px;padding-right:12px;text-align:center;",
 83 |               "mobile": ""
 84 |             }
 85 |           },
 86 |           {
 87 |             "name": "图片",
 88 |             "key": "image",
 89 |             "src": "https://images.pexels.com/photos/1695052/pexels-photo-1695052.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
 90 |             "alt": "Coffee Beans",
 91 |             "type": "link",
 92 |             "linkURL": "",
 93 |             "contentStyles": {
 94 |               "desktop": {
 95 |                 "paddingTop": 0,
 96 |                 "paddingBottom": 0,
 97 |                 "paddingLeft": 0,
 98 |                 "paddingRight": 0,
 99 |                 "textAlign": "center"
100 |               },
101 |               "mobile": {}
102 |             },
103 |             "styles": {
104 |               "desktop": {
105 |                 "width": "auto"
106 |               },
107 |               "mobile": {}
108 |             },
109 |             "styleConfig": {
110 |               "className": "image-2",
111 |               "desktop": "width:auto;",
112 |               "mobile": ""
113 |             },
114 |             "contentStyleConfig": {
115 |               "className": "image-content-2",
116 |               "desktop": "padding-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;text-align:center;",
117 |               "mobile": ""
118 |             }
119 |           },
120 |           {
121 |             "name": "文本",
122 |             "key": "text",
123 |             "text": "<b>You might also like</b>",
124 |             "styles": {
125 |               "desktop": {
126 |                 "fontSize": 24,
127 |                 "fontFamily": "sans-serif",
128 |                 "color": "#000",
129 |                 "lineHeight": "140%",
130 |                 "paddingTop": 12,
131 |                 "paddingBottom": 12,
132 |                 "paddingLeft": 12,
133 |                 "paddingRight": 12,
134 |                 "textAlign": "center"
135 |               },
136 |               "mobile": {}
137 |             },
138 |             "styleConfig": {
139 |               "className": "text-3",
140 |               "desktop": "font-size:24px;font-family:sans-serif;color:#000;line-height:140%;padding-top:12px;padding-bottom:12px;padding-left:12px;padding-right:12px;text-align:center;",
141 |               "mobile": ""
142 |             }
143 |           },
144 |           {
145 |             "name": "按钮",
146 |             "key": "button",
147 |             "text": "Buy now",
148 |             "type": "link",
149 |             "linkURL": "",
150 |             "contentStyles": {
151 |               "desktop": {
152 |                 "textAlign": "center",
153 |                 "paddingTop": 12,
154 |                 "paddingBottom": 12,
155 |                 "paddingLeft": 12,
156 |                 "paddingRight": 12
157 |               },
158 |               "mobile": {}
159 |             },
160 |             "styles": {
161 |               "desktop": {
162 |                 "width": "auto",
163 |                 "fontSize": 12,
164 |                 "lineHeight": "140%",
165 |                 "borderRadius": 4,
166 |                 "fontFamily": "sans-serif",
167 |                 "paddingTop": 10,
168 |                 "paddingBottom": 10,
169 |                 "paddingLeft": 20,
170 |                 "paddingRight": 20,
171 |                 "backgroundColor": "#865548",
172 |                 "color": "#fff",
173 |                 "display": "inline-block"
174 |               },
175 |               "mobile": {}
176 |             },
177 |             "styleConfig": {
178 |               "className": "button-4",
179 |               "desktop": "width:auto;font-size:12px;line-height:140%;border-radius:4px;font-family:sans-serif;padding-top:10px;padding-bottom:10px;padding-left:20px;padding-right:20px;background-color:#865548;color:#fff;display:inline-block;",
180 |               "mobile": ""
181 |             },
182 |             "contentStyleConfig": {
183 |               "className": "button-content-4",
184 |               "desktop": "text-align:center;padding-top:12px;padding-bottom:12px;padding-left:12px;padding-right:12px;",
185 |               "mobile": ""
186 |             }
187 |           },
188 |           {
189 |             "name": "分割线",
190 |             "key": "divider",
191 |             "contentStyles": {
192 |               "desktop": {
193 |                 "paddingTop": 12,
194 |                 "paddingBottom": 12,
195 |                 "paddingLeft": 12,
196 |                 "paddingRight": 12,
197 |                 "textAlign": "center"
198 |               },
199 |               "mobile": {}
200 |             },
201 |             "styles": {
202 |               "desktop": {
203 |                 "width": "100%",
204 |                 "borderTopStyle": "solid",
205 |                 "borderTopColor": "#ccc",
206 |                 "borderTopWidth": 1,
207 |                 "display": "inline-block",
208 |                 "verticalAlign": "middle"
209 |               },
210 |               "mobile": {}
211 |             },
212 |             "styleConfig": {
213 |               "className": "divider-5",
214 |               "desktop": "width:100%;border-top-style:solid;border-top-color:#ccc;border-top-width:1px;display:inline-block;vertical-align:middle;",
215 |               "mobile": ""
216 |             },
217 |             "contentStyleConfig": {
218 |               "className": "divider-content-5",
219 |               "desktop": "padding-top:12px;padding-bottom:12px;padding-left:12px;padding-right:12px;text-align:center;",
220 |               "mobile": ""
221 |             }
222 |           }
223 |         ],
224 |         "styleConfig": {
225 |           "className": "content-0",
226 |           "desktop": "background-color:transparent;padding-top:0px;padding-left:0px;padding-right:0px;padding-bottom:0px;",
227 |           "mobile": ""
228 |         },
229 |         "contentStyleConfig": {
230 |           "className": "content-content-0",
231 |           "desktop": "background-color:transparent;",
232 |           "mobile": ""
233 |         }
234 |       }
235 |     ],
236 |     "styleConfig": {
237 |       "className": "column-0",
238 |       "desktop": "background-color:transparent;padding-top:0px;padding-left:0px;padding-right:0px;padding-bottom:0px;",
239 |       "mobile": ""
240 |     },
241 |     "contentStyleConfig": {
242 |       "className": "column-content-0",
243 |       "desktop": "background-color:#fff;",
244 |       "mobile": ""
245 |     }
246 |   },
247 |   {
248 |     "name": "行",
249 |     "key": "column",
250 |     "type": "1-1",
251 |     "styles": {
252 |       "key": "column",
253 |       "desktop": {
254 |         "backgroundColor": "transparent",
255 |         "paddingTop": 0,
256 |         "paddingLeft": 0,
257 |         "paddingRight": 0,
258 |         "paddingBottom": 0,
259 |         "contentBackground": "#fff"
260 |       },
261 |       "mobile": {}
262 |     },
263 |     "children": [
264 |       {
265 |         "name": "容器",
266 |         "key": "content",
267 |         "width": "50%",
268 |         "styles": {
269 |           "key": "column",
270 |           "desktop": {
271 |             "backgroundColor": "transparent",
272 |             "paddingTop": 0,
273 |             "paddingLeft": 0,
274 |             "paddingRight": 0,
275 |             "paddingBottom": 0,
276 |             "contentBackground": "transparent"
277 |           },
278 |           "mobile": {}
279 |         },
280 |         "children": [
281 |           {
282 |             "name": "文本",
283 |             "key": "text",
284 |             "text": "Coffee",
285 |             "styles": {
286 |               "desktop": {
287 |                 "fontSize": 14,
288 |                 "fontFamily": "sans-serif",
289 |                 "color": "#000",
290 |                 "lineHeight": "140%",
291 |                 "paddingTop": 12,
292 |                 "paddingBottom": 12,
293 |                 "paddingLeft": 12,
294 |                 "paddingRight": 12,
295 |                 "textAlign": "center"
296 |               },
297 |               "mobile": {}
298 |             },
299 |             "styleConfig": {
300 |               "className": "text-0",
301 |               "desktop": "font-size:14px;font-family:sans-serif;color:#000;line-height:140%;padding-top:12px;padding-bottom:12px;padding-left:12px;padding-right:12px;text-align:center;",
302 |               "mobile": ""
303 |             }
304 |           },
305 |           {
306 |             "name": "图片",
307 |             "key": "image",
308 |             "src": "https://images.pexels.com/photos/129207/pexels-photo-129207.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
309 |             "alt": "White Ceramic Coffee Cup on White Saucer",
310 |             "type": "link",
311 |             "linkURL": "",
312 |             "contentStyles": {
313 |               "desktop": {
314 |                 "paddingTop": 12,
315 |                 "paddingBottom": 12,
316 |                 "paddingLeft": 12,
317 |                 "paddingRight": 12,
318 |                 "textAlign": "center"
319 |               },
320 |               "mobile": {}
321 |             },
322 |             "styles": {
323 |               "desktop": {
324 |                 "width": "auto"
325 |               },
326 |               "mobile": {}
327 |             },
328 |             "styleConfig": {
329 |               "className": "image-1",
330 |               "desktop": "width:auto;",
331 |               "mobile": ""
332 |             },
333 |             "contentStyleConfig": {
334 |               "className": "image-content-1",
335 |               "desktop": "padding-top:12px;padding-bottom:12px;padding-left:12px;padding-right:12px;text-align:center;",
336 |               "mobile": ""
337 |             }
338 |           }
339 |         ],
340 |         "styleConfig": {
341 |           "className": "1-content-0",
342 |           "desktop": "background-color:transparent;padding-top:0px;padding-left:0px;padding-right:0px;padding-bottom:0px;",
343 |           "mobile": ""
344 |         },
345 |         "contentStyleConfig": {
346 |           "className": "content-content-0",
347 |           "desktop": "background-color:transparent;",
348 |           "mobile": ""
349 |         }
350 |       },
351 |       {
352 |         "name": "容器",
353 |         "key": "content",
354 |         "width": "50%",
355 |         "styles": {
356 |           "key": "column",
357 |           "desktop": {
358 |             "backgroundColor": "transparent",
359 |             "paddingTop": 0,
360 |             "paddingLeft": 0,
361 |             "paddingRight": 0,
362 |             "paddingBottom": 0,
363 |             "contentBackground": "transparent"
364 |           },
365 |           "mobile": {}
366 |         },
367 |         "children": [
368 |           {
369 |             "name": "文本",
370 |             "key": "text",
371 |             "text": "Coffee",
372 |             "styles": {
373 |               "desktop": {
374 |                 "fontSize": 14,
375 |                 "fontFamily": "sans-serif",
376 |                 "color": "#000",
377 |                 "lineHeight": "140%",
378 |                 "paddingTop": 12,
379 |                 "paddingBottom": 12,
380 |                 "paddingLeft": 12,
381 |                 "paddingRight": 12,
382 |                 "textAlign": "center"
383 |               },
384 |               "mobile": {}
385 |             },
386 |             "styleConfig": {
387 |               "className": "1-text-0",
388 |               "desktop": "font-size:14px;font-family:sans-serif;color:#000;line-height:140%;padding-top:12px;padding-bottom:12px;padding-left:12px;padding-right:12px;text-align:center;",
389 |               "mobile": ""
390 |             }
391 |           },
392 |           {
393 |             "name": "图片",
394 |             "key": "image",
395 |             "src": "https://images.pexels.com/photos/1752806/pexels-photo-1752806.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
396 |             "alt": "Person Showing White Mug in Focus Photography",
397 |             "type": "link",
398 |             "linkURL": "",
399 |             "contentStyles": {
400 |               "desktop": {
401 |                 "paddingTop": 12,
402 |                 "paddingBottom": 12,
403 |                 "paddingLeft": 12,
404 |                 "paddingRight": 12,
405 |                 "textAlign": "center"
406 |               },
407 |               "mobile": {}
408 |             },
409 |             "styles": {
410 |               "desktop": {
411 |                 "width": "auto"
412 |               },
413 |               "mobile": {}
414 |             },
415 |             "styleConfig": {
416 |               "className": "1-image-1",
417 |               "desktop": "width:auto;",
418 |               "mobile": ""
419 |             },
420 |             "contentStyleConfig": {
421 |               "className": "image-content-1",
422 |               "desktop": "padding-top:12px;padding-bottom:12px;padding-left:12px;padding-right:12px;text-align:center;",
423 |               "mobile": ""
424 |             }
425 |           }
426 |         ],
427 |         "styleConfig": {
428 |           "className": "1-content-1",
429 |           "desktop": "background-color:transparent;padding-top:0px;padding-left:0px;padding-right:0px;padding-bottom:0px;",
430 |           "mobile": ""
431 |         },
432 |         "contentStyleConfig": {
433 |           "className": "content-content-1",
434 |           "desktop": "background-color:transparent;",
435 |           "mobile": ""
436 |         }
437 |       }
438 |     ],
439 |     "styleConfig": {
440 |       "className": "column-1",
441 |       "desktop": "background-color:transparent;padding-top:0px;padding-left:0px;padding-right:0px;padding-bottom:0px;",
442 |       "mobile": ""
443 |     },
444 |     "contentStyleConfig": {
445 |       "className": "column-content-1",
446 |       "desktop": "background-color:#fff;",
447 |       "mobile": ""
448 |     },
449 |     "columns": 2
450 |   },
451 |   {
452 |     "name": "行",
453 |     "key": "column",
454 |     "type": "1-1",
455 |     "styles": {
456 |       "key": "column",
457 |       "desktop": {
458 |         "backgroundColor": "transparent",
459 |         "paddingTop": 0,
460 |         "paddingLeft": 0,
461 |         "paddingRight": 0,
462 |         "paddingBottom": 0,
463 |         "contentBackground": "#fff"
464 |       },
465 |       "mobile": {}
466 |     },
467 |     "children": [
468 |       {
469 |         "name": "容器",
470 |         "key": "content",
471 |         "width": "50%",
472 |         "styles": {
473 |           "key": "column",
474 |           "desktop": {
475 |             "backgroundColor": "transparent",
476 |             "paddingTop": 0,
477 |             "paddingLeft": 0,
478 |             "paddingRight": 0,
479 |             "paddingBottom": 0,
480 |             "contentBackground": "transparent"
481 |           },
482 |           "mobile": {}
483 |         },
484 |         "children": [
485 |           {
486 |             "name": "文本",
487 |             "key": "text",
488 |             "text": "Coffee",
489 |             "styles": {
490 |               "desktop": {
491 |                 "fontSize": 14,
492 |                 "fontFamily": "sans-serif",
493 |                 "color": "#000",
494 |                 "lineHeight": "140%",
495 |                 "paddingTop": 12,
496 |                 "paddingBottom": 12,
497 |                 "paddingLeft": 12,
498 |                 "paddingRight": 12,
499 |                 "textAlign": "center"
500 |               },
501 |               "mobile": {}
502 |             },
503 |             "styleConfig": {
504 |               "className": "text-0",
505 |               "desktop": "font-size:14px;font-family:sans-serif;color:#000;line-height:140%;padding-top:12px;padding-bottom:12px;padding-left:12px;padding-right:12px;text-align:center;",
506 |               "mobile": ""
507 |             }
508 |           },
509 |           {
510 |             "name": "图片",
511 |             "key": "image",
512 |             "src": "https://images.pexels.com/photos/129207/pexels-photo-129207.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
513 |             "alt": "White Ceramic Coffee Cup on White Saucer",
514 |             "type": "link",
515 |             "linkURL": "",
516 |             "contentStyles": {
517 |               "desktop": {
518 |                 "paddingTop": 12,
519 |                 "paddingBottom": 12,
520 |                 "paddingLeft": 12,
521 |                 "paddingRight": 12,
522 |                 "textAlign": "center"
523 |               },
524 |               "mobile": {}
525 |             },
526 |             "styles": {
527 |               "desktop": {
528 |                 "width": "auto"
529 |               },
530 |               "mobile": {}
531 |             },
532 |             "styleConfig": {
533 |               "className": "image-1",
534 |               "desktop": "width:auto;",
535 |               "mobile": ""
536 |             },
537 |             "contentStyleConfig": {
538 |               "className": "image-content-1",
539 |               "desktop": "padding-top:12px;padding-bottom:12px;padding-left:12px;padding-right:12px;text-align:center;",
540 |               "mobile": ""
541 |             }
542 |           }
543 |         ],
544 |         "styleConfig": {
545 |           "className": "2-content-0",
546 |           "desktop": "background-color:transparent;padding-top:0px;padding-left:0px;padding-right:0px;padding-bottom:0px;",
547 |           "mobile": ""
548 |         },
549 |         "contentStyleConfig": {
550 |           "className": "content-content-0",
551 |           "desktop": "background-color:transparent;",
552 |           "mobile": ""
553 |         }
554 |       },
555 |       {
556 |         "name": "容器",
557 |         "key": "content",
558 |         "width": "50%",
559 |         "styles": {
560 |           "key": "column",
561 |           "desktop": {
562 |             "backgroundColor": "transparent",
563 |             "paddingTop": 0,
564 |             "paddingLeft": 0,
565 |             "paddingRight": 0,
566 |             "paddingBottom": 0,
567 |             "contentBackground": "transparent"
568 |           },
569 |           "mobile": {}
570 |         },
571 |         "children": [
572 |           {
573 |             "name": "文本",
574 |             "key": "text",
575 |             "text": "Coffee",
576 |             "styles": {
577 |               "desktop": {
578 |                 "fontSize": 14,
579 |                 "fontFamily": "sans-serif",
580 |                 "color": "#000",
581 |                 "lineHeight": "140%",
582 |                 "paddingTop": 12,
583 |                 "paddingBottom": 12,
584 |                 "paddingLeft": 12,
585 |                 "paddingRight": 12,
586 |                 "textAlign": "center"
587 |               },
588 |               "mobile": {}
589 |             },
590 |             "styleConfig": {
591 |               "className": "1-text-0",
592 |               "desktop": "font-size:14px;font-family:sans-serif;color:#000;line-height:140%;padding-top:12px;padding-bottom:12px;padding-left:12px;padding-right:12px;text-align:center;",
593 |               "mobile": ""
594 |             }
595 |           },
596 |           {
597 |             "name": "图片",
598 |             "key": "image",
599 |             "src": "https://images.pexels.com/photos/1752806/pexels-photo-1752806.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
600 |             "alt": "Person Showing White Mug in Focus Photography",
601 |             "type": "link",
602 |             "linkURL": "",
603 |             "contentStyles": {
604 |               "desktop": {
605 |                 "paddingTop": 12,
606 |                 "paddingBottom": 12,
607 |                 "paddingLeft": 12,
608 |                 "paddingRight": 12,
609 |                 "textAlign": "center"
610 |               },
611 |               "mobile": {}
612 |             },
613 |             "styles": {
614 |               "desktop": {
615 |                 "width": "auto"
616 |               },
617 |               "mobile": {}
618 |             },
619 |             "styleConfig": {
620 |               "className": "1-image-1",
621 |               "desktop": "width:auto;",
622 |               "mobile": ""
623 |             },
624 |             "contentStyleConfig": {
625 |               "className": "image-content-1",
626 |               "desktop": "padding-top:12px;padding-bottom:12px;padding-left:12px;padding-right:12px;text-align:center;",
627 |               "mobile": ""
628 |             }
629 |           }
630 |         ],
631 |         "styleConfig": {
632 |           "className": "2-content-1",
633 |           "desktop": "background-color:transparent;padding-top:0px;padding-left:0px;padding-right:0px;padding-bottom:0px;",
634 |           "mobile": ""
635 |         },
636 |         "contentStyleConfig": {
637 |           "className": "content-content-1",
638 |           "desktop": "background-color:transparent;",
639 |           "mobile": ""
640 |         }
641 |       }
642 |     ],
643 |     "styleConfig": {
644 |       "className": "column-2",
645 |       "desktop": "background-color:transparent;padding-top:0px;padding-left:0px;padding-right:0px;padding-bottom:0px;",
646 |       "mobile": ""
647 |     },
648 |     "contentStyleConfig": {
649 |       "className": "column-content-2",
650 |       "desktop": "background-color:#fff;",
651 |       "mobile": ""
652 |     },
653 |     "columns": 2
654 |   },
655 |   {
656 |     "name": "行",
657 |     "key": "column",
658 |     "type": "full",
659 |     "styles": {
660 |       "key": "column",
661 |       "desktop": {
662 |         "backgroundColor": "transparent",
663 |         "paddingTop": 0,
664 |         "paddingLeft": 0,
665 |         "paddingRight": 0,
666 |         "paddingBottom": 0,
667 |         "contentBackground": "#865548"
668 |       },
669 |       "mobile": {}
670 |     },
671 |     "children": [
672 |       {
673 |         "name": "容器",
674 |         "key": "content",
675 |         "width": "100%",
676 |         "styles": {
677 |           "key": "column",
678 |           "desktop": {
679 |             "backgroundColor": "transparent",
680 |             "paddingTop": 0,
681 |             "paddingLeft": 0,
682 |             "paddingRight": 0,
683 |             "paddingBottom": 0,
684 |             "contentBackground": "transparent"
685 |           },
686 |           "mobile": {}
687 |         },
688 |         "children": [
689 |           {
690 |             "name": "文本",
691 |             "key": "text",
692 |             "text": "No langer wants to receive this email?",
693 |             "styles": {
694 |               "desktop": {
695 |                 "fontSize": 14,
696 |                 "fontFamily": "sans-serif",
697 |                 "color": "#ffffff",
698 |                 "lineHeight": "140%",
699 |                 "paddingTop": 12,
700 |                 "paddingBottom": 12,
701 |                 "paddingLeft": 12,
702 |                 "paddingRight": 12,
703 |                 "textAlign": "center"
704 |               },
705 |               "mobile": {}
706 |             },
707 |             "styleConfig": {
708 |               "className": "text-0",
709 |               "desktop": "font-size:14px;font-family:sans-serif;color:#ffffff;line-height:140%;padding-top:12px;padding-bottom:12px;padding-left:12px;padding-right:12px;text-align:center;",
710 |               "mobile": ""
711 |             }
712 |           },
713 |           {
714 |             "name": "文本",
715 |             "key": "text",
716 |             "text": "unsubscribe",
717 |             "styles": {
718 |               "desktop": {
719 |                 "fontSize": 12,
720 |                 "fontFamily": "sans-serif",
721 |                 "color": "#ffffff",
722 |                 "lineHeight": "140%",
723 |                 "paddingTop": 12,
724 |                 "paddingBottom": 12,
725 |                 "paddingLeft": 12,
726 |                 "paddingRight": 12,
727 |                 "textAlign": "center"
728 |               },
729 |               "mobile": {}
730 |             },
731 |             "styleConfig": {
732 |               "className": "text-1",
733 |               "desktop": "font-size:12px;font-family:sans-serif;color:#ffffff;line-height:140%;padding-top:12px;padding-bottom:12px;padding-left:12px;padding-right:12px;text-align:center;",
734 |               "mobile": ""
735 |             }
736 |           },
737 |           {
738 |             "name": "文本",
739 |             "key": "text",
740 |             "text": "@powerd by email editor",
741 |             "styles": {
742 |               "desktop": {
743 |                 "fontSize": 14,
744 |                 "fontFamily": "sans-serif",
745 |                 "color": "#ffffff",
746 |                 "lineHeight": "140%",
747 |                 "paddingTop": 12,
748 |                 "paddingBottom": 12,
749 |                 "paddingLeft": 12,
750 |                 "paddingRight": 12,
751 |                 "textAlign": "center"
752 |               },
753 |               "mobile": {}
754 |             },
755 |             "styleConfig": {
756 |               "className": "text-2",
757 |               "desktop": "font-size:14px;font-family:sans-serif;color:#ffffff;line-height:140%;padding-top:12px;padding-bottom:12px;padding-left:12px;padding-right:12px;text-align:center;",
758 |               "mobile": ""
759 |             }
760 |           }
761 |         ],
762 |         "styleConfig": {
763 |           "className": "3-content-0",
764 |           "desktop": "background-color:transparent;padding-top:0px;padding-left:0px;padding-right:0px;padding-bottom:0px;",
765 |           "mobile": ""
766 |         },
767 |         "contentStyleConfig": {
768 |           "className": "content-content-0",
769 |           "desktop": "background-color:transparent;",
770 |           "mobile": ""
771 |         }
772 |       }
773 |     ],
774 |     "styleConfig": {
775 |       "className": "column-3",
776 |       "desktop": "background-color:transparent;padding-top:0px;padding-left:0px;padding-right:0px;padding-bottom:0px;",
777 |       "mobile": ""
778 |     },
779 |     "contentStyleConfig": {
780 |       "className": "column-content-3",
781 |       "desktop": "background-color:#865548;",
782 |       "mobile": ""
783 |     }
784 |   }
785 | ]
786 | 


--------------------------------------------------------------------------------