easy-email-extensions 3.1.10 → 3.1.13

package/package.json

@@ -2,7 +2,7 @@
   "name": "easy-email-extensions",
   "license": "MIT",
   "description": "Email editor",
-  "version": "3.1.10",
+  "version": "3.1.13",
   "author": "m-Ryan",
   "repository": {
     "type": "git",
@@ -81,5 +81,5 @@
     "react-dom": "^17.0.2",
     "react-final-form": "^6.5.7"
   },
-  "gitHead": "d7d88713ca9ed6489507d37515c67fa31a8aea34"
+  "gitHead": "1eeea30006df18e744f2191da42dc95094448fdb"
 }

package/readme.md

@@ -1,138 +1,138 @@
-# 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 { BlockManager, BasicType } from 'easy-email-core';
-import { EmailEditor, EmailEditorProvider } from 'easy-email-editor';
-import { SimpleLayout } from 'easy-email-extensions';
-
-import 'easy-email-editor/lib/style.css';
-import 'easy-email-extensions/lib/style.css';
-
-const initialValues = {
-  subject: 'Welcome to Easy-email',
-  subTitle: 'Nice to meet you!',
-  content: BlockManager.getBlockByType(BasicType.PAGE)!.create({}),
-};
-
-export function App() {
-  return (
-    <EmailEditorProvider
-      data={initialValues}
-      height={'calc(100vh - 72px)'}
-      autoComplete
-      dashed={false}
-    >
-      {({ values }) => {
-        return (
-          <SimpleLayout>
-            <EmailEditor />
-          </SimpleLayout>
-        );
-      }}
-    </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>
-              );
-            },
-          },
-        ],
-      },
-    ]);
-    ```
-
-- `SimpleLayout`
-
-  - All in one extension, provide basic and complete layout example. Refer to the above extension for configuration items.
+# 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 { BlockManager, BasicType } from 'easy-email-core';
+import { EmailEditor, EmailEditorProvider } from 'easy-email-editor';
+import { SimpleLayout } from 'easy-email-extensions';
+
+import 'easy-email-editor/lib/style.css';
+import 'easy-email-extensions/lib/style.css';
+
+const initialValues = {
+  subject: 'Welcome to Easy-email',
+  subTitle: 'Nice to meet you!',
+  content: BlockManager.getBlockByType(BasicType.PAGE)!.create({}),
+};
+
+export function App() {
+  return (
+    <EmailEditorProvider
+      data={initialValues}
+      height={'calc(100vh - 72px)'}
+      autoComplete
+      dashed={false}
+    >
+      {({ values }) => {
+        return (
+          <SimpleLayout>
+            <EmailEditor />
+          </SimpleLayout>
+        );
+      }}
+    </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>
+              );
+            },
+          },
+        ],
+      },
+    ]);
+    ```
+
+- `SimpleLayout`
+
+  - All in one extension, provide basic and complete layout example. Refer to the above extension for configuration items.

package/lib/AttributePanel/AttributePanel.d.ts

@@ -1,3 +0,0 @@
-export interface AttributePanelProps {
-}
-export declare function AttributePanel(): JSX.Element | null;

package/lib/AttributePanel/components/UI/Help/index.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import { TooltipProps } from '@arco-design/web-react';
-export declare function Help(props: TooltipProps & Partial<{
-    style: Partial<React.CSSProperties>;
-}> & {
-    title: React.ReactNode;
-}): JSX.Element;

package/lib/AttributePanel/components/UI/HtmlEditor.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const HtmlEditor: React.FC<{
-    visible: boolean;
-    setVisible: (v: boolean) => void;
-}>;

package/lib/AttributePanel/components/attributes/Align.d.ts

@@ -1,3 +0,0 @@
-export declare function Align({ inline }: {
-    inline?: boolean;
-}): JSX.Element;

package/lib/AttributePanel/components/attributes/AttributesPanelWrapper/index.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export interface AttributesPanelWrapper {
-    style?: React.CSSProperties;
-    extra?: React.ReactNode;
-}
-export declare const AttributesPanelWrapper: React.FC<AttributesPanelWrapper>;

package/lib/AttributePanel/components/attributes/Background.d.ts

@@ -1 +0,0 @@
-export declare function Background(): JSX.Element;

package/lib/AttributePanel/components/attributes/BackgroundColor.d.ts

@@ -1,3 +0,0 @@
-export declare function BackgroundColor({ title, }: {
-    title?: string;
-}): JSX.Element;

package/lib/AttributePanel/components/attributes/Border.d.ts

@@ -1 +0,0 @@
-export declare function Border(): JSX.Element;

package/lib/AttributePanel/components/attributes/BorderColor.d.ts

@@ -1 +0,0 @@
-export declare function BorderColor(): JSX.Element;

package/lib/AttributePanel/components/attributes/BorderStyle.d.ts

@@ -1,5 +0,0 @@
-export declare const borderStyleOptions: {
-    value: string;
-    label: string;
-}[];
-export declare function BorderStyle(): JSX.Element;

package/lib/AttributePanel/components/attributes/BorderWidth.d.ts

@@ -1 +0,0 @@
-export declare function BorderWidth(): JSX.Element;

package/lib/AttributePanel/components/attributes/Color.d.ts

@@ -1,4 +0,0 @@
-export declare function Color({ title, }: {
-    title?: string;
-    inline?: boolean;
-}): JSX.Element;

package/lib/AttributePanel/components/attributes/ContainerBackgroundColor.d.ts

@@ -1,3 +0,0 @@
-export declare function ContainerBackgroundColor({ title, }: {
-    title?: string;
-}): JSX.Element;

package/lib/AttributePanel/components/attributes/Decoration.d.ts

@@ -1 +0,0 @@
-export declare function Decoration(): JSX.Element;

package/lib/AttributePanel/components/attributes/Direction.d.ts

@@ -1 +0,0 @@
-export declare function Direction(): JSX.Element;

package/lib/AttributePanel/components/attributes/FontFamily.d.ts

@@ -1 +0,0 @@
-export declare function FontFamily(): JSX.Element;

package/lib/AttributePanel/components/attributes/FontSize.d.ts

@@ -1 +0,0 @@
-export declare function FontSize(): JSX.Element;

package/lib/AttributePanel/components/attributes/FontStyle.d.ts

@@ -1 +0,0 @@
-export declare function FontStyle(): JSX.Element;

package/lib/AttributePanel/components/attributes/FontWeight.d.ts

@@ -1 +0,0 @@
-export declare function FontWeight(): JSX.Element;

package/lib/AttributePanel/components/attributes/Height.d.ts

@@ -1,3 +0,0 @@
-export declare function Height({ inline }: {
-    inline?: boolean;
-}): JSX.Element;

package/lib/AttributePanel/components/attributes/LetterSpacing.d.ts

@@ -1 +0,0 @@
-export declare function LetterSpacing(): JSX.Element;

package/lib/AttributePanel/components/attributes/LineHeight.d.ts

@@ -1 +0,0 @@
-export declare function LineHeight(): JSX.Element;

package/lib/AttributePanel/components/attributes/Link.d.ts

@@ -1 +0,0 @@
-export declare function Link(): JSX.Element;

package/lib/AttributePanel/components/attributes/Margin.d.ts

@@ -1 +0,0 @@
-export declare function Margin(): JSX.Element;

package/lib/AttributePanel/components/attributes/MergeTags.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export declare const MergeTags: React.FC<{
-    onChange: (v: string) => void;
-    value: string;
-    isSelect?: boolean;
-}>;

package/lib/AttributePanel/components/attributes/NavbarLinkPadding.d.ts

@@ -1,3 +0,0 @@
-export declare function NavbarLinkPadding({ name }: {
-    name: string;
-}): JSX.Element;

package/lib/AttributePanel/components/attributes/Padding.d.ts

@@ -1,5 +0,0 @@
-export interface PaddingProps {
-    title?: string;
-    attributeName?: 'padding' | 'inner-padding' | 'text-padding';
-}
-export declare function Padding(props?: PaddingProps): JSX.Element;

package/lib/AttributePanel/components/attributes/TextAlign.d.ts

@@ -1 +0,0 @@
-export declare function TextAlign(): JSX.Element;

package/lib/AttributePanel/components/attributes/TextDecoration.d.ts

@@ -1 +0,0 @@
-export declare function TextDecoration(): JSX.Element;

package/lib/AttributePanel/components/attributes/TextTransform.d.ts

@@ -1 +0,0 @@
-export declare function TextTransform(): JSX.Element;

package/lib/AttributePanel/components/attributes/VerticalAlign.d.ts

@@ -1,3 +0,0 @@
-export declare function VerticalAlign({ attributeName, }: {
-    attributeName?: string;
-}): JSX.Element;

package/lib/AttributePanel/components/attributes/Width.d.ts

@@ -1,5 +0,0 @@
-import { InputWithUnitProps } from '@extensions/components/Form/InputWithUnit';
-export declare function Width({ inline, unitOptions, }: {
-    inline?: boolean;
-    unitOptions?: InputWithUnitProps['unitOptions'];
-}): JSX.Element;

package/lib/AttributePanel/components/attributes/index.d.ts

@@ -1,29 +0,0 @@
-export { Align } from './Align';
-export { Color } from './Color';
-export { Height } from './Height';
-export { TextAlign } from './TextAlign';
-export { AttributesPanelWrapper } from './AttributesPanelWrapper';
-export { ContainerBackgroundColor } from './ContainerBackgroundColor';
-export { LetterSpacing } from './LetterSpacing';
-export { TextDecoration } from './TextDecoration';
-export { Background } from './Background';
-export { Decoration } from './Decoration';
-export { LineHeight } from './LineHeight';
-export { TextTransform } from './TextTransform';
-export { BackgroundColor } from './BackgroundColor';
-export { Direction } from './Direction';
-export { Link } from './Link';
-export { VerticalAlign } from './VerticalAlign';
-export { Border } from './Border';
-export { FontFamily } from './FontFamily';
-export { Margin } from './Margin';
-export { Width } from './Width';
-export { BorderColor } from './BorderColor';
-export { FontSize } from './FontSize';
-export { MergeTags } from './MergeTags';
-export { BorderStyle } from './BorderStyle';
-export { FontStyle } from './FontStyle';
-export { NavbarLinkPadding } from './NavbarLinkPadding';
-export { BorderWidth } from './BorderWidth';
-export { FontWeight } from './FontWeight';
-export { Padding } from './Padding';

package/lib/AttributePanel/components/blocks/Accordion/index.d.ts

@@ -1 +0,0 @@
-export declare function Accordion(): JSX.Element;

package/lib/AttributePanel/components/blocks/AccordionElement/index.d.ts

@@ -1 +0,0 @@
-export declare function AccordionElement(): JSX.Element;

package/lib/AttributePanel/components/blocks/AccordionText/index.d.ts

@@ -1 +0,0 @@
-export declare function AccordionText(): JSX.Element;

package/lib/AttributePanel/components/blocks/AccordionTitle/index.d.ts

@@ -1 +0,0 @@
-export declare function AccordionTitle(): JSX.Element;

package/lib/AttributePanel/components/blocks/Button/index.d.ts

@@ -1 +0,0 @@
-export declare function Button(): JSX.Element;

package/lib/AttributePanel/components/blocks/Carousel/index.d.ts

@@ -1 +0,0 @@
-export declare function Carousel(): JSX.Element;

package/lib/AttributePanel/components/blocks/Column/index.d.ts

@@ -1 +0,0 @@
-export declare function Column(): JSX.Element;

package/lib/AttributePanel/components/blocks/Divider/index.d.ts

@@ -1 +0,0 @@
-export declare function Divider(): JSX.Element;

package/lib/AttributePanel/components/blocks/Group/index.d.ts

@@ -1 +0,0 @@
-export declare function Group(): JSX.Element;

package/lib/AttributePanel/components/blocks/Hero/index.d.ts

@@ -1 +0,0 @@
-export declare function Hero(): JSX.Element;

package/lib/AttributePanel/components/blocks/Image/index.d.ts

@@ -1 +0,0 @@
-export declare function Image(): JSX.Element;

package/lib/AttributePanel/components/blocks/Navbar/index.d.ts

@@ -1 +0,0 @@
-export declare function Navbar(): JSX.Element;

package/lib/AttributePanel/components/blocks/Page/index.d.ts

@@ -1 +0,0 @@
-export declare function Page(): JSX.Element | null;

package/lib/AttributePanel/components/blocks/Raw/index.d.ts

@@ -1 +0,0 @@
-export declare function Raw(): JSX.Element;

package/lib/AttributePanel/components/blocks/Section/index.d.ts

@@ -1 +0,0 @@
-export declare function Section(): JSX.Element;

package/lib/AttributePanel/components/blocks/Social/index.d.ts

@@ -1 +0,0 @@
-export declare function Social(): JSX.Element;

package/lib/AttributePanel/components/blocks/Spacer/index.d.ts

@@ -1 +0,0 @@
-export declare function Spacer(): JSX.Element;

package/lib/AttributePanel/components/blocks/Table/index.d.ts

@@ -1 +0,0 @@
-export declare function Table(): JSX.Element;

package/lib/AttributePanel/components/blocks/Text/index.d.ts

@@ -1 +0,0 @@
-export declare function Text(): JSX.Element;

package/lib/AttributePanel/components/blocks/Wrapper/index.d.ts

@@ -1 +0,0 @@
-export declare function Wrapper(): JSX.Element;

package/lib/AttributePanel/components/blocks/index.d.ts

@@ -1,42 +0,0 @@
-import { Page } from './Page';
-import { Section } from './Section';
-import { Column } from './Column';
-import { Text } from './Text';
-import { Image } from './Image';
-import { Group } from './Group';
-import { Button } from './Button';
-import { Divider } from './Divider';
-import { Wrapper } from './Wrapper';
-import { Spacer } from './Spacer';
-import { Raw } from './Raw';
-import { Accordion } from './Accordion';
-import { AccordionElement } from './AccordionElement';
-import { AccordionTitle } from './AccordionTitle';
-import { AccordionText } from './AccordionText';
-import { Carousel } from './Carousel';
-import { Hero } from './Hero';
-import { Navbar } from './Navbar';
-import { Social } from './Social';
-import { Table } from './Table';
-export declare const blocks: {
-    page: typeof Page;
-    section: typeof Section;
-    column: typeof Column;
-    text: typeof Text;
-    image: typeof Image;
-    group: typeof Group;
-    button: typeof Button;
-    divider: typeof Divider;
-    wrapper: typeof Wrapper;
-    spacer: typeof Spacer;
-    raw: typeof Raw;
-    accordion: typeof Accordion;
-    "accordion-element": typeof AccordionElement;
-    "accordion-title": typeof AccordionTitle;
-    "accordion-text": typeof AccordionText;
-    carousel: typeof Carousel;
-    hero: typeof Hero;
-    navbar: typeof Navbar;
-    social: typeof Social;
-    table: typeof Table;
-};

package/lib/AttributePanel/components/provider/PresetColorsProvider/index.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export declare const PresetColorsContext: React.Context<{
-    colors: string[];
-    addCurrentColor: (color: string) => void;
-}>;
-export declare const PresetColorsProvider: React.FC<{}>;

package/lib/AttributePanel/components/provider/SelectionRangeProvider/index.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export declare const SelectionRangeContext: React.Context<{
-    selectionRange: Range | null;
-    setSelectionRange: React.Dispatch<React.SetStateAction<Range | null>>;
-}>;
-export declare const SelectionRangeProvider: React.FC<{}>;

package/lib/AttributePanel/hooks/useSelectionRange.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-export declare function useSelectionRange(): {
-    selectionRange: Range | null;
-    setSelectionRange: import("react").Dispatch<import("react").SetStateAction<Range | null>>;
-    restoreRange: (range: Range) => void;
-};

package/lib/AttributePanel/index.d.ts

@@ -1,3 +0,0 @@
-export { AttributePanel } from './AttributePanel';
-export { BlockAttributeConfigurationManager } from './utils/BlockAttributeConfigurationManager';
-export * from './components/attributes';

package/lib/AttributePanel/utils/BlockAttributeConfigurationManager.d.ts

@@ -1,10 +0,0 @@
-declare type ObjectComponent = {
-    [key: string]: () => JSX.Element | null;
-};
-export declare class BlockAttributeConfigurationManager {
-    private static map;
-    static add(componentMap: ObjectComponent): void;
-    static get<T extends ObjectComponent>(name: keyof T): string;
-    static getMap(): ObjectComponent;
-}
-export {};

package/lib/AttributePanel/utils/InputNumberAdapter.d.ts

@@ -1,2 +0,0 @@
-export declare function isNumber(num: any): num is number;
-export declare function InputNumberAdapter(val: string | number): string | number;

package/lib/AttributePanel/utils/PromiseEach.d.ts

@@ -1 +0,0 @@
-export declare function PromiseEach(promiseLikes: PromiseLike<any>[]): Promise<unknown>;