easy-email-extensions 4.15.0 → 4.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/AttributePanel/components/blocks/AdvancedTable/Operation/index.d.ts +2 -0
- package/lib/AttributePanel/components/blocks/AdvancedTable/Operation/tableMenuConfig.d.ts +38 -0
- package/lib/AttributePanel/components/blocks/AdvancedTable/Operation/tableOperationMenu.d.ts +60 -0
- package/lib/AttributePanel/components/blocks/AdvancedTable/Operation/tableTool.d.ts +45 -0
- package/lib/AttributePanel/components/blocks/AdvancedTable/Operation/type.d.ts +21 -0
- package/lib/AttributePanel/components/blocks/AdvancedTable/Operation/util.d.ts +23 -0
- package/lib/AttributePanel/components/blocks/AdvancedTable/index.d.ts +2 -0
- package/lib/AttributePanel/components/blocks/index.d.ts +2 -0
- package/lib/index2.js +925 -116
- package/lib/index2.js.map +1 -1
- package/package.json +3 -2
- package/readme.md +0 -233
package/package.json
CHANGED
@@ -2,7 +2,7 @@
|
|
2
2
|
"name": "easy-email-extensions",
|
3
3
|
"license": "MIT",
|
4
4
|
"description": "Email editor",
|
5
|
-
"version": "4.
|
5
|
+
"version": "4.17.0",
|
6
6
|
"author": "m-Ryan",
|
7
7
|
"repository": {
|
8
8
|
"type": "git",
|
@@ -66,6 +66,7 @@
|
|
66
66
|
"react": "^18.2.0",
|
67
67
|
"react-dom": "^18.2.0",
|
68
68
|
"react-final-form": "^6.5.7",
|
69
|
+
"rimraf": "^5.0.5",
|
69
70
|
"rollup-plugin-visualizer": "^5.5.2",
|
70
71
|
"sass": "^1.43.4",
|
71
72
|
"ts-node": "^10.4.0",
|
@@ -100,5 +101,5 @@
|
|
100
101
|
"react-dom": "^18.2.0",
|
101
102
|
"react-final-form": "^6.5.7"
|
102
103
|
},
|
103
|
-
"gitHead": "
|
104
|
+
"gitHead": "3199b669b83e870ee2b7e01710d704a5eb1e7d07"
|
104
105
|
}
|
package/readme.md
CHANGED
@@ -1,13 +1,5 @@
|
|
1
1
|
# Easy-email-extensions
|
2
2
|
|
3
|
-
## Introduction
|
4
|
-
|
5
|
-
Provide default UI components, when they don’t meet your needs, you can refer to it and write your own.
|
6
|
-
|
7
|
-
It also provides the following utils:
|
8
|
-
|
9
|
-
- MjmlToJson
|
10
|
-
|
11
3
|
## usage
|
12
4
|
|
13
5
|
```sh
|
@@ -25,7 +17,6 @@ import React from 'react';
|
|
25
17
|
import { BlockManager, BasicType, AdvancedType } from 'easy-email-core';
|
26
18
|
import { EmailEditor, EmailEditorProvider } from 'easy-email-editor';
|
27
19
|
import { ExtensionProps, StandardLayout } from 'easy-email-extensions';
|
28
|
-
import { useWindowSize } from 'react-use';
|
29
20
|
|
30
21
|
import 'easy-email-editor/lib/style.css';
|
31
22
|
import 'easy-email-extensions/lib/style.css';
|
@@ -100,9 +91,6 @@ const initialValues = {
|
|
100
91
|
};
|
101
92
|
|
102
93
|
export default function App() {
|
103
|
-
const { width } = useWindowSize();
|
104
|
-
|
105
|
-
const smallScene = width < 1400;
|
106
94
|
|
107
95
|
return (
|
108
96
|
<EmailEditorProvider
|
@@ -114,7 +102,6 @@ export default function App() {
|
|
114
102
|
{({ values }) => {
|
115
103
|
return (
|
116
104
|
<StandardLayout
|
117
|
-
compact={!smallScene}
|
118
105
|
categories={categories}
|
119
106
|
showSourceCode={true}
|
120
107
|
>
|
@@ -127,223 +114,3 @@ export default function App() {
|
|
127
114
|
}
|
128
115
|
|
129
116
|
```
|
130
|
-
|
131
|
-
## Extensions
|
132
|
-
|
133
|
-
- `AttributePanel`
|
134
|
-
|
135
|
-
- Basic block configuration panel
|
136
|
-
|
137
|
-
- <img src="https://assets.maocanhua.cn/3e74a61d-ab22-4cf3-afc9-d511b82e08cd-image.png" alt="AttributePanel">
|
138
|
-
|
139
|
-
- You can add or overwrite
|
140
|
-
|
141
|
-
```tsx
|
142
|
-
import { BlockAttributeConfigurationManager } from 'easy-email-extensions';
|
143
|
-
|
144
|
-
BlockAttributeConfigurationManager.add({
|
145
|
-
[BasicType.TEXT]: () => <div>will be overwrite `Text`</div>,
|
146
|
-
});
|
147
|
-
```
|
148
|
-
|
149
|
-
- Hide Page block subject & subTitle
|
150
|
-
|
151
|
-
```tsx
|
152
|
-
const DefaultPageConfigPanel = BlockAttributeConfigurationManager.get(BasicType.PAGE);
|
153
|
-
BlockAttributeConfigurationManager.add({
|
154
|
-
[BasicType.PAGE]: () => (
|
155
|
-
<DefaultPageConfigPanel
|
156
|
-
hideSubject
|
157
|
-
hideSubTitle
|
158
|
-
/>
|
159
|
-
),
|
160
|
-
});
|
161
|
-
```
|
162
|
-
|
163
|
-
- `InteractivePrompt`
|
164
|
-
|
165
|
-
- block hover and focus style
|
166
|
-
|
167
|
-
- <img src="https://assets.maocanhua.cn/298d72d6-a509-4cd2-85c7-dfb915971620-image.png" alt="InteractivePrompt">
|
168
|
-
|
169
|
-
- No configuration items
|
170
|
-
|
171
|
-
- `BlockLayer`
|
172
|
-
|
173
|
-
- <img src="https://assets.maocanhua.cn/de1f5211-350e-43c9-9c99-d97a2f196e04-image.png" alt="ShortcutToolbar">
|
174
|
-
- No configuration items
|
175
|
-
|
176
|
-
- `ShortcutToolbar`
|
177
|
-
|
178
|
-
- <img src="https://assets.maocanhua.cn/f0e2ccc6-0627-472b-ad78-bc92bdb46ad1-image.png">
|
179
|
-
- You can add or overwrite popover's preset blocks
|
180
|
-
|
181
|
-
```tsx
|
182
|
-
import { BasicType } from 'easy-email-core';
|
183
|
-
import { BlockMarketManager, BlockMaskWrapper } from 'easy-email-extensions';
|
184
|
-
|
185
|
-
BlockMarketManager.addCategories([
|
186
|
-
{
|
187
|
-
title: 'Custom',
|
188
|
-
name: 'custom',
|
189
|
-
blocks: [
|
190
|
-
{
|
191
|
-
type: BasicType.TEXT,
|
192
|
-
title: 'Text',
|
193
|
-
description: 'This block allows you to display text in your email.',
|
194
|
-
component: () => {
|
195
|
-
return (
|
196
|
-
<BlockMaskWrapper
|
197
|
-
type={BasicType.TEXT}
|
198
|
-
payload={{
|
199
|
-
attributes: {
|
200
|
-
'font-size': '20px',
|
201
|
-
align: 'center',
|
202
|
-
padding: '0px 0px 0px 0px',
|
203
|
-
color: '#4A90E2',
|
204
|
-
},
|
205
|
-
data: {
|
206
|
-
value: {
|
207
|
-
content: '20px',
|
208
|
-
},
|
209
|
-
},
|
210
|
-
}}
|
211
|
-
>
|
212
|
-
<div style={{ fontSize: 20, width: '100%', paddingLeft: 20 }}>20px</div>
|
213
|
-
</BlockMaskWrapper>
|
214
|
-
);
|
215
|
-
},
|
216
|
-
},
|
217
|
-
],
|
218
|
-
},
|
219
|
-
]);
|
220
|
-
```
|
221
|
-
|
222
|
-
- `SimpleLayout`
|
223
|
-
|
224
|
-
- props
|
225
|
-
- showSourceCode
|
226
|
-
- mjmlReadOnly
|
227
|
-
- defaultShowLayer
|
228
|
-
|
229
|
-
- `StandardLayout`
|
230
|
-
|
231
|
-
- props
|
232
|
-
- compact
|
233
|
-
- categories
|
234
|
-
- showSourceCode
|
235
|
-
- jsonReadOnly
|
236
|
-
- mjmlReadOnly
|
237
|
-
|
238
|
-
## transform mjml to json
|
239
|
-
|
240
|
-
```ts
|
241
|
-
import { MjmlToJson } from 'easy-email-extensions';
|
242
|
-
|
243
|
-
const json = MjmlToJson(`
|
244
|
-
<mjml>
|
245
|
-
<mj-body>
|
246
|
-
<mj-hero mode="fluid-height" background-width="600px" background-height="469px" background-url="https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg" background-color="#2a3448" padding="100px 0px">
|
247
|
-
<mj-text padding="20px" color="#ffffff" font-family="Helvetica" align="center" font-size="45px" line-height="45px" font-weight="900">
|
248
|
-
GO TO SPACE
|
249
|
-
</mj-text>
|
250
|
-
<mj-button href="https://mjml.io/" align="center">
|
251
|
-
ORDER YOUR TICKET NOW
|
252
|
-
</mj-button>
|
253
|
-
</mj-hero>
|
254
|
-
</mj-body>
|
255
|
-
</mjml>
|
256
|
-
`);
|
257
|
-
|
258
|
-
console.log(json);
|
259
|
-
```
|
260
|
-
|
261
|
-
// output
|
262
|
-
|
263
|
-
```json
|
264
|
-
{
|
265
|
-
"type": "page",
|
266
|
-
"data": {
|
267
|
-
"value": {
|
268
|
-
"breakpoint": "480px",
|
269
|
-
"headAttributes": "",
|
270
|
-
"font-size": "14px",
|
271
|
-
"line-height": "1.7",
|
272
|
-
"headStyles": [],
|
273
|
-
"fonts": [],
|
274
|
-
"responsive": true,
|
275
|
-
"font-family": "lucida Grande,Verdana,Microsoft YaHei",
|
276
|
-
"text-color": "#000000"
|
277
|
-
}
|
278
|
-
},
|
279
|
-
"attributes": {
|
280
|
-
"background-color": "#efeeea",
|
281
|
-
"width": "600px"
|
282
|
-
},
|
283
|
-
"children": [
|
284
|
-
{
|
285
|
-
"type": "hero",
|
286
|
-
"data": {
|
287
|
-
"value": {}
|
288
|
-
},
|
289
|
-
"attributes": {
|
290
|
-
"padding": "100px 0px 100px 0px",
|
291
|
-
"border": "none",
|
292
|
-
"direction": "ltr",
|
293
|
-
"text-align": "center",
|
294
|
-
"background-color": "#2a3448",
|
295
|
-
"background-position": "center center",
|
296
|
-
"mode": "fluid-height",
|
297
|
-
"vertical-align": "top",
|
298
|
-
"background-url": "https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg",
|
299
|
-
"background-width": "600px",
|
300
|
-
"background-height": "469px"
|
301
|
-
},
|
302
|
-
"children": [
|
303
|
-
{
|
304
|
-
"type": "text",
|
305
|
-
"data": {
|
306
|
-
"value": {
|
307
|
-
"content": "GO TO SPACE"
|
308
|
-
}
|
309
|
-
},
|
310
|
-
"attributes": {
|
311
|
-
"padding": "20px 20px 20px 20px",
|
312
|
-
"align": "center",
|
313
|
-
"color": "#ffffff",
|
314
|
-
"font-size": "45px",
|
315
|
-
"line-height": "45px",
|
316
|
-
"font-family": "Helvetica",
|
317
|
-
"font-weight": "900"
|
318
|
-
},
|
319
|
-
"children": []
|
320
|
-
},
|
321
|
-
{
|
322
|
-
"type": "button",
|
323
|
-
"data": {
|
324
|
-
"value": {
|
325
|
-
"content": "ORDER YOUR TICKET NOW"
|
326
|
-
}
|
327
|
-
},
|
328
|
-
"attributes": {
|
329
|
-
"align": "center",
|
330
|
-
"background-color": "#414141",
|
331
|
-
"color": "#ffffff",
|
332
|
-
"font-weight": "normal",
|
333
|
-
"border-radius": "3px",
|
334
|
-
"padding": "10px 25px 10px 25px",
|
335
|
-
"inner-padding": "10px 25px 10px 25px",
|
336
|
-
"line-height": "120%",
|
337
|
-
"target": "_blank",
|
338
|
-
"vertical-align": "middle",
|
339
|
-
"border": "none",
|
340
|
-
"text-align": "center",
|
341
|
-
"href": "https://mjml.io/"
|
342
|
-
},
|
343
|
-
"children": []
|
344
|
-
}
|
345
|
-
]
|
346
|
-
}
|
347
|
-
]
|
348
|
-
}
|
349
|
-
```
|