easy-email-extensions 3.0.0-beta-01.0

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "easy-email-extensions",
+  "license": "MIT",
+  "description": "Email editor",
+  "version": "3.0.0-beta-01.0",
+  "author": "m-Ryan",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:m-Ryan/easy-email.git"
+  },
+  "keywords": [
+    "email editor core"
+  ],
+  "files": [
+    "lib"
+  ],
+  "main": "./lib/index.js",
+  "scripts": {
+    "dev": "vite",
+    "typings": "tsc --declaration --emitDeclarationOnly --project tsconfig.json",
+    "build": "rimraf lib  && vite build --config vite.config.ts"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "yarn test && yarn lint-staged"
+    }
+  },
+  "lint-staged": {
+    "src/*.{js,jsx,ts,tsx}, example/*.{js,jsx,ts,tsx}": [
+      "yarn lint"
+    ]
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.177",
+    "@types/node": "^16.11.7",
+    "@types/react": "17.0.2",
+    "@types/react-dom": "^17.0.11",
+    "@vitejs/plugin-react-refresh": "^1.3.6",
+    "cross-env": "^7.0.3",
+    "lerna": "^4.0.0",
+    "less": "^4.1.2",
+    "rollup-plugin-visualizer": "^5.5.2",
+    "sass": "^1.43.4",
+    "tsc-alias": "^1.4.1",
+    "typescript": "^4.4.4",
+    "vite": "^2.6.14",
+    "vite-plugin-html": "^2.1.1",
+    "vite-plugin-style-import": "^1.3.0"
+  },
+  "dependencies": {
+    "antd": "^4.16.13",
+    "codemirror": "^5.63.3",
+    "final-form": "^4.20.4",
+    "final-form-arrays": "^3.0.2",
+    "final-form-set-field-touched": "^1.0.1",
+    "is-hotkey": "^0.2.0",
+    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
+    "mjml-browser": "^4.10.4",
+    "react": "^17.0.2",
+    "react-codemirror2": "^7.2.1",
+    "react-color": "^2.19.3",
+    "react-dom": "^17.0.2",
+    "react-final-form": "^6.5.7",
+    "react-final-form-arrays": "^3.1.3",
+    "react-sortablejs": "^6.0.0",
+    "react-use": "^17.3.1",
+    "sortablejs": "^1.14.0"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-final-form": "^6.5.7"
+  }
+}

package/readme.md

@@ -0,0 +1,130 @@
+# Easy-email-extensions
+
+## Introduction
+
+Provide default UI components, when they don’t meet your needs, you can refer to it and write your own
+
+## usage
+
+```sh
+$ npm install --save easy-email-extensions
+```
+
+or
+
+```sh
+$ yarn add easy-email-extensions
+```
+
+```js
+import React from "react";
+import { BlocksMap, EmailEditor, EmailEditorProvider } from "easy-email-editor";
+import "easy-email-editor/lib/style.css";
+import "antd/dist/antd.css";
+
+const initialValues = {
+  subject: "Welcome to Easy-email",
+  subTitle: "Nice to meet you!",
+  content: BlocksMap.getBlock("Page").create({}),
+};
+
+export function App() {
+  return (
+    <EmailEditorProvider data={initialValues} height={"calc(100vh - 72px)"}>
+      {({ values }) => {
+        return (
+          <SimpleFrame>
+            <EmailEditor />
+          </SimpleFrame>
+        );
+      }}
+    </EmailEditorProvider>
+  );
+}
+```
+
+## 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>,
+    });
+    ```
+
+- `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>
+              );
+            },
+          },
+        ],
+      },
+    ]);
+    ```
+
+- `SimpleFrame`
+
+  - All in one extension, provide basic and complete layout example. Refer to the above extension for configuration items.