@thanhpv102/easy-email-editor 4.19.0

package/lib/locales.json

@@ -0,0 +1 @@
+{"en":{"No matching components":"No matching components","Configuration":"Configuration","Source code":"Source code","Layer":"Layer","attributes":"attributes","Font family":"Font family","Email Setting":"Email Setting","Subject":"Subject","SubTitle":"SubTitle","Width":"Width","Breakpoint":"Breakpoint","Allows you to control on which breakpoint the layout should go desktop/mobile.":"Allows you to control on which breakpoint the layout should go desktop/mobile.","Theme Setting":"Theme Setting","Font size":"Font size","Font weight":"Font weight","Text color":"Text color","Background":"Background","Content background":"Content background","User style":"User style","Import font":"Import font","Points to a hosted css file":"Points to a hosted css file"},"zh-Hans":{"No matching components":"没有匹配的组件","Configuration":"配置","Source code":"源代码","Layer":"层","attributes":"属性","Font family":"字体系列","Email Setting":"电子邮件设置","Subject":"主题","SubTitle":"字幕","Width":"宽度","Breakpoint":"断点","Allows you to control on which breakpoint the layout should go desktop/mobile.":"允许您控制布局应为台式机/移动设备的断点。","Theme Setting":"主题设置","Font size":"字体大小","Font weight":"字体重量","Text color":"文字颜色","Background":"背景","Content background":"内容背景","User style":"用户样式","Import font":"导入字体","Points to a hosted css file":"指向托管的CSS文件"},"ja":{"No matching components":"一致するコンポーネントはありません","Configuration":"構成","Source code":"ソースコード","Layer":"層","attributes":"属性","Font family":"フォントファミリー","Email Setting":"メール設定","Subject":"主題","SubTitle":"字幕","Width":"幅","Breakpoint":"ブレークポイント","Allows you to control on which breakpoint the layout should go desktop/mobile.":"レイアウトがデスクトップ/モバイルに移動するブレークポイントを制御できます。","Theme Setting":"テーマ設定","Font size":"フォントサイズ","Font weight":"フォント重量","Text color":"テキストの色","Background":"バックグラウンド","Content background":"コンテンツの背景","User style":"ユーザースタイル","Import font":"フォントをインポートします","Points to a hosted css file":"ホストされているCSSファイルを指します"},"ko":{"No matching components":"일치하는 구성 요소가 없습니다","Configuration":"구성","Source code":"소스 코드","Layer":"층","attributes":"속성","Font family":"글꼴 가족","Email Setting":"이메일 설정","Subject":"주제","SubTitle":"부제","Width":"너비","Breakpoint":"중단 점","Allows you to control on which breakpoint the layout should go desktop/mobile.":"레이아웃이 데스크탑/모바일로 이동 해야하는 중단 점을 제어 할 수 있습니다.","Theme Setting":"테마 설정","Font size":"글꼴 크기","Font weight":"글꼴 무게","Text color":"텍스트 색상","Background":"배경","Content background":"콘텐츠 배경","User style":"사용자 스타일","Import font":"글꼴을 가져옵니다","Points to a hosted css file":"호스팅 된 CSS 파일을 가리 킵니다"},"it":{"No matching components":"Nessun componente corrispondente","Configuration":"Configurazione","Source code":"Codice sorgente","Layer":"Strato","attributes":"attributi","Font family":"Famiglia di font","Email Setting":"Impostazione e -mail","Subject":"Materia","SubTitle":"Sottotitolo","Width":"Larghezza","Breakpoint":"Punto di rottura","Allows you to control on which breakpoint the layout should go desktop/mobile.":"Ti consente di controllare su quale punto di interruzione il layout dovrebbe andare desktop/mobile.","Theme Setting":"Impostazione del tema","Font size":"Dimensione del font","Font weight":"Peso del carattere","Text color":"Colore del testo","Background":"Sfondo","Content background":"Background di contenuto","User style":"Stile utente","Import font":"Carattere di importazione","Points to a hosted css file":"Punta a un file CSS ospitato"}}

package/lib/typings/index.d.ts

@@ -0,0 +1,14 @@
+import { IPage } from '@thanhpv102/easy-email-core';
+import { JSX } from 'react';
+export interface IEmailTemplate {
+    content: IPage;
+    subject: string;
+    subTitle: string;
+}
+declare global {
+    function t(key: string): string;
+    function t(key: string, placeholder: React.ReactNode): JSX.Element;
+    interface Window {
+        t: (key: string, placeholder?: React.ReactNode) => JSX.Element;
+    }
+}

package/lib/typings/mjml-browser.d.ts

@@ -0,0 +1,37 @@
+declare module 'mjml-browser' {
+    const transform: (vml: string, options?: {
+        beautify?: boolean;
+        minify?: boolean;
+        keepComments?: boolean;
+        validationLevel: 'strict' | 'soft' | 'skip';
+    }) => {
+        json: MjmlBlockItem;
+        html: string;
+        errors: string[];
+    };
+    export default transform;
+}
+interface MjmlBlockItem {
+    file: string;
+    absoluteFilePath: string;
+    line: number;
+    includedIn: any[];
+    tagName: string;
+    children: IChildrenItem[];
+    attributes: IAttributes;
+    content?: string;
+}
+interface IChildrenItem {
+    file?: string;
+    absoluteFilePath?: string;
+    line: number;
+    includedIn: any[];
+    tagName: string;
+    children?: IChildrenItem[];
+    attributes: IAttributes;
+    content?: string;
+    inline?: 'inline';
+}
+interface IAttributes {
+    [key: string]: any;
+}

package/lib/utils/EventManager.d.ts

@@ -0,0 +1,19 @@
+import { ActiveTabKeys } from '../components/Provider/BlocksProvider';
+export declare class EventManager {
+    private static events;
+    static on(type: EventType.ACTIVE_TAB_CHANGE, callback: (payload: {
+        currentTab: ActiveTabKeys;
+        nextTab: ActiveTabKeys;
+    }) => boolean): void;
+    static off(type: EventType, handler: (...args: any[]) => any): void;
+    static exec(type: EventType.ACTIVE_TAB_CHANGE, payload: {
+        currentTab: ActiveTabKeys;
+        nextTab: ActiveTabKeys;
+    }): boolean;
+}
+export declare enum EventType {
+    FOCUS_IDX_CHANGE = "focusIdxChange",
+    ADD_BLOCK = "addBlock",
+    REMOVE_BLOCK = "removeBlock",
+    ACTIVE_TAB_CHANGE = "activeTabChange"
+}

package/lib/utils/HtmlStringToPreviewReactNodes.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare function getChildSelector(selector: string, index: number): string;
+export declare function HtmlStringToPreviewReactNodes(content: string): React.JSX.Element;

package/lib/utils/HtmlStringToReactNodes.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'react';
+export declare function getChildSelector(selector: string, index: number): string;
+export interface HtmlStringToReactNodesOptions {
+    enabledMergeTagsBadge: boolean;
+}
+export declare function HtmlStringToReactNodes(content: string, option: HtmlStringToReactNodesOptions): JSX.Element;

package/lib/utils/MergeTagBadge.d.ts

@@ -0,0 +1,4 @@
+export declare class MergeTagBadge {
+    static transform(content: string, id?: string): string;
+    static revert(content: string, generateMergeTag: (s: string) => string): string;
+}

package/lib/utils/awaitForElement.d.ts

@@ -0,0 +1,4 @@
+export declare function awaitForElement<T extends HTMLElement>(idx: string): {
+    cancel: () => void;
+    promise: Promise<T>;
+};

package/lib/utils/classnames.d.ts

@@ -0,0 +1 @@
+export declare function classnames(...rest: any[]): string;

package/lib/utils/contenteditable.d.ts

@@ -0,0 +1,4 @@
+export declare function getContentEditableType(type: string): string;
+export declare function getContentEditableTypeFromClassName(classList: DOMTokenList | string): string;
+export declare function getContentEditableIdx(idx: string): string;
+export declare function getContentEditableIdxFromClassName(classList: DOMTokenList | string): string;

package/lib/utils/generateTranslate.d.ts

@@ -0,0 +1 @@
+export declare function generateTranslate(localeData: Record<string, string>): any;

package/lib/utils/getBlockNodeByChildEle.d.ts

@@ -0,0 +1 @@
+export declare const getBlockNodeByChildEle: (target?: Element | null) => HTMLElement | null;

package/lib/utils/getBlockNodeByIdx.d.ts

@@ -0,0 +1 @@
+export declare const getBlockNodeByIdx: (idx: string) => HTMLElement | null;

package/lib/utils/getBlockNodes.d.ts

@@ -0,0 +1 @@
+export declare const getBlockNodes: () => Element[];

package/lib/utils/getContentEditableClassName.d.ts

@@ -0,0 +1 @@
+export declare function getContentEditableClassName(blockType: string, idx: string): string[];

package/lib/utils/getDirectionPosition.d.ts

@@ -0,0 +1,15 @@
+export type DirectionPosition = {
+    horizontal: {
+        direction: string;
+        isEdge: boolean;
+    };
+    vertical: {
+        direction: string;
+        isEdge: boolean;
+    };
+};
+export declare function getDirectionPosition(ev: {
+    target: EventTarget | null;
+    clientY: number;
+    clientX: number;
+}, deviation?: number): DirectionPosition;

package/lib/utils/getEditorRoot.d.ts

@@ -0,0 +1 @@
+export declare const getEditorRoot: () => HTMLElement | null;

package/lib/utils/getImg.d.ts

@@ -0,0 +1,5 @@
+declare const defaultImagesMap: {
+    IMAGE_59: string;
+};
+export declare function getImg(name: keyof typeof defaultImagesMap): string;
+export {};

package/lib/utils/getInsertPosition.d.ts

@@ -0,0 +1,17 @@
+import { IPage } from '@thanhpv102/easy-email-core';
+import { DirectionPosition } from './getDirectionPosition';
+interface Params {
+    context: {
+        content: IPage;
+    };
+    idx: string;
+    directionPosition: DirectionPosition;
+    dragType: string;
+}
+export declare function getInsertPosition(params: Params): {
+    parentIdx: string;
+    insertIndex: number;
+    endDirection: string;
+    hoverIdx: string;
+} | null;
+export {};

package/lib/utils/getPluginElement.d.ts

@@ -0,0 +1 @@
+export declare const getPluginElement: () => HTMLElement | null | undefined;

package/lib/utils/getShadowRoot.d.ts

@@ -0,0 +1 @@
+export declare const getShadowRoot: () => ShadowRoot;

package/lib/utils/index.d.ts

@@ -0,0 +1,12 @@
+export { getBlockNodeByChildEle } from './getBlockNodeByChildEle';
+export { getBlockNodeByIdx } from './getBlockNodeByIdx';
+export { getDirectionPosition } from './getDirectionPosition';
+export { getBlockNodes } from './getBlockNodes';
+export { getEditorRoot } from './getEditorRoot';
+export { getShadowRoot } from './getShadowRoot';
+export { getPluginElement } from './getPluginElement';
+export { scrollBlockEleIntoView } from './scrollBlockEleIntoView';
+export { isTextBlock } from './isTextBlock';
+export { MergeTagBadge } from './MergeTagBadge';
+export { getContentEditableClassName } from './getContentEditableClassName';
+export { EventManager } from './EventManager';

package/lib/utils/isButtonBlock.d.ts

@@ -0,0 +1 @@
+export declare function isButtonBlock(blockType: any): boolean;

package/lib/utils/isNavbarBlock.d.ts

@@ -0,0 +1 @@
+export declare function isNavbarBlock(blockType: any): boolean;

package/lib/utils/isTableBlock.d.ts

@@ -0,0 +1 @@
+export declare function isTableBlock(blockType: any): boolean;

package/lib/utils/isTextBlock.d.ts

@@ -0,0 +1 @@
+export declare function isTextBlock(blockType: any): boolean;

package/lib/utils/logger.d.ts

@@ -0,0 +1,2 @@
+export declare const overrideErrorLog: () => void;
+export declare const restoreErrorLog: () => void;

package/lib/utils/scrollBlockEleIntoView.d.ts

@@ -0,0 +1,3 @@
+export declare function scrollBlockEleIntoView({ idx }: {
+    idx: string;
+}): void;

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@thanhpv102/easy-email-editor",
+  "license": "MIT",
+  "description": "Email editor",
+  "version": "4.19.0",
+  "author": "m-Ryan",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:zalify/easy-email.git"
+  },
+  "keywords": [
+    "email editor core"
+  ],
+  "files": [
+    "lib"
+  ],
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "husky": {
+    "hooks": {
+      "pre-commit": "yarn test && yarn lint-staged"
+    }
+  },
+  "lint-staged": {
+    "src/*.{js,jsx,ts,tsx}, example/*.{js,jsx,ts,tsx}": [
+      "yarn lint"
+    ]
+  },
+  "dependencies": {
+    "final-form": "^5.0.0",
+    "final-form-arrays": "^4.0.0",
+    "final-form-set-field-touched": "^1.0.1",
+    "is-hotkey": "^0.2.0",
+    "lodash": "^4.17.21",
+    "react-final-form-arrays": "^4.0.0",
+    "react-use": "^17.3.1"
+  },
+  "devDependencies": {
+    "@types/final-form-set-field-touched": "^1.0.0",
+    "@types/is-hotkey": "^0.1.7",
+    "@types/lodash": "^4.14.178",
+    "@types/node": "^16.11.7",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.22.0",
+    "@typescript-eslint/parser": "^4.28.3",
+    "eslint": "^9.26.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-loader": "^4.0.2",
+    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "mjml-browser": "^4.10.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-final-form": "^7.0.0",
+    "rimraf": "^3.0.2",
+    "sass": "^1.43.4",
+    "tsc-alias": "^1.4.1",
+    "typescript": "^4.6.3",
+    "vite": "^7.1.11"
+  },
+  "peerDependencies": {
+    "@thanhpv102/easy-email-core": "^4.19.0",
+    "mjml-browser": "^4.10.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-final-form": "^7.0.0"
+  },
+  "gitHead": "2a08e8af15766344de708d891c1c8ea31bb77646",
+  "scripts": {
+    "dev": "vite",
+    "typings": "tsc --declaration --emitDeclarationOnly --project tsconfig.lib.json && tsc-alias -p tsconfig.alias.json",
+    "build": "rimraf lib && npm run typings && vite build --config vite.config.ts",
+    "format": "eslint --fix  --ext .tsx,.ts,.tsx src/"
+  }
+}

package/readme.md

@@ -0,0 +1,43 @@
+# Easy-email-editor
+
+## Introduction
+
+Email render and preview container.
+
+## usage
+
+```sh
+$ npm install --save easy-email-editor
+```
+
+or
+
+```sh
+$ yarn add easy-email-editor
+```
+
+```js
+import React from 'react';
+import { BlockManager } from 'easy-email-core';
+import { EmailEditor, EmailEditorProvider } from 'easy-email-editor';
+import 'easy-email-editor/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)'}
+    >
+      {({ values }) => {
+        return <EmailEditor />;
+      }}
+    </EmailEditorProvider>
+  );
+}
+```