easy-email-extensions 4.15.0 → 4.17.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "easy-email-extensions",
   "license": "MIT",
   "description": "Email editor",
-  "version": "4.15.0",
+  "version": "4.17.0",
   "author": "m-Ryan",
   "repository": {
     "type": "git",
@@ -66,6 +66,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-final-form": "^6.5.7",
+    "rimraf": "^5.0.5",
     "rollup-plugin-visualizer": "^5.5.2",
     "sass": "^1.43.4",
     "ts-node": "^10.4.0",
@@ -100,5 +101,5 @@
     "react-dom": "^18.2.0",
     "react-final-form": "^6.5.7"
   },
-  "gitHead": "85a860273f634eb721e4502a41096a20454ff64b"
+  "gitHead": "3199b669b83e870ee2b7e01710d704a5eb1e7d07"
 }

package/readme.md

@@ -1,13 +1,5 @@
 # Easy-email-extensions
 
-## Introduction
-
-Provide default UI components, when they don’t meet your needs, you can refer to it and write your own.
-
-It also provides the following utils:
-
-- MjmlToJson
-
 ## usage
 
 ```sh
@@ -25,7 +17,6 @@ import React from 'react';
 import { BlockManager, BasicType, AdvancedType } from 'easy-email-core';
 import { EmailEditor, EmailEditorProvider } from 'easy-email-editor';
 import { ExtensionProps, StandardLayout } from 'easy-email-extensions';
-import { useWindowSize } from 'react-use';
 
 import 'easy-email-editor/lib/style.css';
 import 'easy-email-extensions/lib/style.css';
@@ -100,9 +91,6 @@ const initialValues = {
 };
 
 export default function App() {
-  const { width } = useWindowSize();
-
-  const smallScene = width < 1400;
 
   return (
     <EmailEditorProvider
@@ -114,7 +102,6 @@ export default function App() {
       {({ values }) => {
         return (
           <StandardLayout
-            compact={!smallScene}
             categories={categories}
             showSourceCode={true}
           >
@@ -127,223 +114,3 @@ export default function App() {
 }
 
 ```
-
-## Extensions
-
-- `AttributePanel`
-
-  - Basic block configuration panel
-
-  - <img src="https://assets.maocanhua.cn/3e74a61d-ab22-4cf3-afc9-d511b82e08cd-image.png" alt="AttributePanel">
-
-  - You can add or overwrite
-
-    ```tsx
-    import { BlockAttributeConfigurationManager } from 'easy-email-extensions';
-
-    BlockAttributeConfigurationManager.add({
-      [BasicType.TEXT]: () => <div>will be overwrite `Text`</div>,
-    });
-    ```
-
-  - Hide Page block subject & subTitle
-
-    ```tsx
-    const DefaultPageConfigPanel = BlockAttributeConfigurationManager.get(BasicType.PAGE);
-    BlockAttributeConfigurationManager.add({
-      [BasicType.PAGE]: () => (
-        <DefaultPageConfigPanel
-          hideSubject
-          hideSubTitle
-        />
-      ),
-    });
-    ```
-
-- `InteractivePrompt`
-
-  - block hover and focus style
-
-  - <img src="https://assets.maocanhua.cn/298d72d6-a509-4cd2-85c7-dfb915971620-image.png" alt="InteractivePrompt">
-
-  - No configuration items
-
-- `BlockLayer`
-
-  - <img src="https://assets.maocanhua.cn/de1f5211-350e-43c9-9c99-d97a2f196e04-image.png" alt="ShortcutToolbar">
-  - No configuration items
-
-- `ShortcutToolbar`
-
-  - <img src="https://assets.maocanhua.cn/f0e2ccc6-0627-472b-ad78-bc92bdb46ad1-image.png">
-  - You can add or overwrite popover's preset blocks
-
-    ```tsx
-    import { BasicType } from 'easy-email-core';
-    import { BlockMarketManager, BlockMaskWrapper } from 'easy-email-extensions';
-
-    BlockMarketManager.addCategories([
-      {
-        title: 'Custom',
-        name: 'custom',
-        blocks: [
-          {
-            type: BasicType.TEXT,
-            title: 'Text',
-            description: 'This block allows you to display text in your email.',
-            component: () => {
-              return (
-                <BlockMaskWrapper
-                  type={BasicType.TEXT}
-                  payload={{
-                    attributes: {
-                      'font-size': '20px',
-                      align: 'center',
-                      padding: '0px 0px 0px 0px',
-                      color: '#4A90E2',
-                    },
-                    data: {
-                      value: {
-                        content: '20px',
-                      },
-                    },
-                  }}
-                >
-                  <div style={{ fontSize: 20, width: '100%', paddingLeft: 20 }}>20px</div>
-                </BlockMaskWrapper>
-              );
-            },
-          },
-        ],
-      },
-    ]);
-    ```
-
-- `SimpleLayout`
-
-  - props
-    - showSourceCode
-    - mjmlReadOnly
-    - defaultShowLayer
-
-- `StandardLayout`
-
-  - props
-    - compact
-    - categories
-    - showSourceCode
-    - jsonReadOnly
-    - mjmlReadOnly
-
-## transform mjml to json
-
-```ts
-import { MjmlToJson } from 'easy-email-extensions';
-
-const json = MjmlToJson(`
-<mjml>
-  <mj-body>
-    <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">
-      <mj-text padding="20px" color="#ffffff" font-family="Helvetica" align="center" font-size="45px" line-height="45px" font-weight="900">
-        GO TO SPACE
-      </mj-text>
-      <mj-button href="https://mjml.io/" align="center">
-        ORDER YOUR TICKET NOW
-      </mj-button>
-    </mj-hero>
-  </mj-body>
-</mjml>
-`);
-
-console.log(json);
-```
-
-// output
-
-```json
-{
-  "type": "page",
-  "data": {
-    "value": {
-      "breakpoint": "480px",
-      "headAttributes": "",
-      "font-size": "14px",
-      "line-height": "1.7",
-      "headStyles": [],
-      "fonts": [],
-      "responsive": true,
-      "font-family": "lucida Grande,Verdana,Microsoft YaHei",
-      "text-color": "#000000"
-    }
-  },
-  "attributes": {
-    "background-color": "#efeeea",
-    "width": "600px"
-  },
-  "children": [
-    {
-      "type": "hero",
-      "data": {
-        "value": {}
-      },
-      "attributes": {
-        "padding": "100px 0px 100px 0px",
-        "border": "none",
-        "direction": "ltr",
-        "text-align": "center",
-        "background-color": "#2a3448",
-        "background-position": "center center",
-        "mode": "fluid-height",
-        "vertical-align": "top",
-        "background-url": "https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg",
-        "background-width": "600px",
-        "background-height": "469px"
-      },
-      "children": [
-        {
-          "type": "text",
-          "data": {
-            "value": {
-              "content": "GO TO SPACE"
-            }
-          },
-          "attributes": {
-            "padding": "20px 20px 20px 20px",
-            "align": "center",
-            "color": "#ffffff",
-            "font-size": "45px",
-            "line-height": "45px",
-            "font-family": "Helvetica",
-            "font-weight": "900"
-          },
-          "children": []
-        },
-        {
-          "type": "button",
-          "data": {
-            "value": {
-              "content": "ORDER YOUR TICKET NOW"
-            }
-          },
-          "attributes": {
-            "align": "center",
-            "background-color": "#414141",
-            "color": "#ffffff",
-            "font-weight": "normal",
-            "border-radius": "3px",
-            "padding": "10px 25px 10px 25px",
-            "inner-padding": "10px 25px 10px 25px",
-            "line-height": "120%",
-            "target": "_blank",
-            "vertical-align": "middle",
-            "border": "none",
-            "text-align": "center",
-            "href": "https://mjml.io/"
-          },
-          "children": []
-        }
-      ]
-    }
-  ]
-}
-```