easy-email-pro-editor 0.2.0

package/lib/typings/components/BeacasEditor/InteractiveState/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const InteractiveState: () => JSX.Element;

package/lib/typings/components/BeacasEditor/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const BeacasEditor: React.FC<{
+    children?: React.ReactNode;
+}>;

package/lib/typings/components/BeacasEditorProvider/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { EmailEditorProps } from "../../typings";
+export interface MergetagItem {
+    label: string;
+    value: string;
+    children?: MergetagItem[];
+    selectable?: boolean;
+}
+export declare const BeacasEditorProvider: (props: EmailEditorProps) => JSX.Element;

package/lib/typings/components/Elements/BaseElement.d.ts

@@ -0,0 +1,53 @@
+import React from "react";
+import { RenderElementProps } from "slate-react";
+import { CustomSlateEditor } from "../../typings/custom-types";
+import { Element, PageElement } from "easy-email-pro-core";
+export type BaseElementProps<T extends Element> = Omit<RenderElementProps, "element"> & {
+    element: T;
+    atomElement: T;
+    elementAttributes: T["attributes"];
+    context: {
+        data: PageElement["data"];
+        attributes: PageElement["attributes"];
+    };
+    editor: CustomSlateEditor;
+    placeholder?: React.ReactNode;
+    isMobileActive: boolean;
+};
+export declare abstract class BaseElement<T extends Element> extends React.PureComponent<BaseElementProps<T>> {
+    defaultAttributes: Partial<T>;
+    abstract componentType: string;
+    static contextType: React.Context<{
+        parent: BaseElement<any> | null;
+    }>;
+    get mediaQueries(): {
+        [prop: string]: string;
+    };
+    get attributes(): T["attributes"];
+    constructor(props: BaseElementProps<any>);
+    get parent(): BaseElement<any>;
+    get parentElement(): any;
+    get containerWidth(): string;
+    getShorthandAttrValue(attribute: string, direction: string): number;
+    getShorthandBorderValue(direction: string): number;
+    getBoxWidths(): {
+        totalWidth: number;
+        borders: number;
+        paddings: number;
+        box: number;
+    };
+    get nonRawSiblings(): any;
+    getStyles(): {};
+    getAttribute(name: string): string;
+    htmlAttributes: ((attributes: Record<string, any> | string) => {}) & import("lodash").MemoizedFunction;
+    styles(styles: string | Record<string, string>): Record<string, string>;
+    getMediaQuery(): Record<string, string>;
+    getStyleText(): string;
+    renderElement(): React.ReactNode;
+    renderChildrenWithPlaceholder(): JSX.Element;
+    get childContext(): {
+        parent: any;
+    };
+    render(): React.ReactNode;
+    renderWithColumn: (children: React.ReactNode) => JSX.Element;
+}

package/lib/typings/components/Elements/atom/Button.d.ts

@@ -0,0 +1,115 @@
+/// <reference types="react" />
+import { BaseElement } from "../BaseElement";
+import { ButtonElement, Element } from "easy-email-pro-core";
+export declare class Button<T extends Element = ButtonElement> extends BaseElement<T> {
+    static endingTag: boolean;
+    componentType: string;
+    static allowedAttributes: {
+        align: string;
+        "background-color": string;
+        "border-bottom": string;
+        "border-left": string;
+        "border-radius": string;
+        "border-right": string;
+        "border-top": string;
+        border: string;
+        color: string;
+        "container-background-color": string;
+        "font-family": string;
+        "font-size": string;
+        "font-style": string;
+        "font-weight": string;
+        height: string;
+        href: string;
+        name: string;
+        title: string;
+        "inner-padding": string;
+        "letter-spacing": string;
+        "line-height": string;
+        "padding-bottom": string;
+        "padding-left": string;
+        "padding-right": string;
+        "padding-top": string;
+        padding: string;
+        rel: string;
+        target: string;
+        "text-decoration": string;
+        "text-transform": string;
+        "vertical-align": string;
+        "text-align": string;
+        width: string;
+    };
+    static defaultAttributes: {
+        title?: string | undefined;
+        "background-color"?: string | undefined;
+        border?: string | undefined;
+        "border-radius"?: string | undefined;
+        padding?: string | undefined;
+        "padding-top"?: string | undefined;
+        "padding-bottom"?: string | undefined;
+        "padding-left"?: string | undefined;
+        "padding-right"?: string | undefined;
+        "text-align"?: string | undefined;
+        "container-background-color"?: string | undefined;
+        height?: string | undefined;
+        align?: string | undefined;
+        color?: string | undefined;
+        href?: string | undefined;
+        rel?: string | undefined;
+        target?: string | undefined;
+        "inner-padding"?: string | undefined;
+        "vertical-align"?: "middle" | "top" | "bottom" | undefined;
+        width?: string | undefined;
+        "font-family"?: string | undefined;
+        "font-size"?: string | undefined;
+        "font-style"?: string | undefined;
+        "font-weight"?: string | undefined;
+        "line-height"?: string | number | undefined;
+        "letter-spacing"?: string | undefined;
+        "text-decoration"?: string | undefined;
+        "text-transform"?: string | undefined;
+        "css-class"?: string | undefined;
+        "mj-class"?: string | undefined;
+    };
+    getStyles(): {
+        table: {
+            "border-collapse": string;
+            width: string;
+            "line-height": string;
+        };
+        td: {
+            border: string;
+            "border-bottom": string;
+            "border-left": string;
+            "border-radius": string;
+            "border-right": string;
+            "border-top": string;
+            cursor: string;
+            "font-style": string;
+            height: string;
+            "mso-padding-alt": string;
+            "text-align": string;
+            background: string;
+        };
+        content: {
+            display: string;
+            width: string | null;
+            background: string;
+            color: string;
+            "font-family": string;
+            "font-size": string;
+            "font-style": string;
+            "font-weight": string;
+            "line-height": string;
+            "letter-spacing": string;
+            margin: string;
+            "text-decoration": string;
+            "text-transform": string;
+            padding: string;
+            "mso-padding-alt": string;
+            "border-radius": string;
+        };
+    };
+    calculateAWidth(width: string): string | null;
+    renderElement(): JSX.Element;
+}

package/lib/typings/components/Elements/atom/Column.d.ts

@@ -0,0 +1,112 @@
+/// <reference types="react" />
+import { ColumnElement, Element } from "easy-email-pro-core";
+import { BaseElement } from "../BaseElement";
+export declare class Column<T extends Element = ColumnElement> extends BaseElement<T> {
+    componentType: string;
+    static allowedAttributes: {
+        "background-color": string;
+        border: string;
+        "border-bottom": string;
+        "border-left": string;
+        "border-radius": string;
+        "border-right": string;
+        "border-top": string;
+        direction: string;
+        "inner-background-color": string;
+        "padding-bottom": string;
+        "padding-left": string;
+        "padding-right": string;
+        "padding-top": string;
+        "inner-border": string;
+        "inner-border-bottom": string;
+        "inner-border-left": string;
+        "inner-border-radius": string;
+        "inner-border-right": string;
+        "inner-border-top": string;
+        padding: string;
+        "vertical-align": string;
+        width: string;
+    };
+    static defaultAttributes: {
+        "background-color"?: string | undefined;
+        border?: string | undefined;
+        "border-radius"?: string | undefined;
+        direction?: string | undefined;
+        padding?: string | undefined;
+        "text-align"?: string | undefined;
+        "vertical-align"?: string | undefined;
+        width?: string | undefined;
+        "inner-border"?: string | undefined;
+        "inner-border-radius"?: string | undefined;
+        "inner-background-color"?: "color" | undefined;
+        "css-class"?: string | undefined;
+        "mj-class"?: string | undefined;
+    };
+    get containerWidth(): string;
+    getStyles(): {
+        div: {
+            "font-size": string;
+            "text-align": string;
+            direction: string;
+            display: string;
+            "vertical-align": string;
+            width: string;
+        };
+        table: {
+            "background-color": string;
+            border: string;
+            "border-bottom": string;
+            "border-left": string;
+            "border-radius": string;
+            "border-right": string;
+            "border-top": string;
+        } | {
+            "background-color": string;
+            border: string;
+            "border-bottom": string;
+            "border-left": string;
+            "border-radius": string;
+            "border-right": string;
+            "border-top": string;
+            "vertical-align": string;
+        };
+        tdOutlook: {
+            "vertical-align": string;
+            width: string;
+        };
+        gutter: {
+            padding: string;
+            "padding-top": string;
+            "padding-right": string;
+            "padding-bottom": string;
+            "padding-left": string;
+            "background-color": string;
+            border: string;
+            "border-bottom": string;
+            "border-left": string;
+            "border-radius": string;
+            "border-right": string;
+            "border-top": string;
+            "vertical-align": string;
+        };
+    };
+    getMobileWidth(): string;
+    getWidthAsPixel(): string;
+    getParsedWidth(): {
+        unit: string;
+        parsedWidth: number;
+    };
+    getParsedWidth(toString: boolean): string;
+    getColumnClass(): {
+        className: string;
+        parsedWidth: number;
+        unit: string;
+    };
+    get mediaQueries(): {
+        [x: string]: string;
+    };
+    hasGutter(): boolean;
+    renderGutter(): JSX.Element;
+    renderColumn(): JSX.Element;
+    renderElement(): JSX.Element;
+}

package/lib/typings/components/Elements/atom/Divider.d.ts

@@ -0,0 +1,53 @@
+import { DividerElement, Element } from "easy-email-pro-core";
+import React from "react";
+import { BaseElement } from "../BaseElement";
+export declare class Divider<T extends Element = DividerElement> extends BaseElement<T> {
+    componentType: string;
+    static allowedAttributes: {
+        "border-color": string;
+        "border-style": string;
+        "border-width": string;
+        "container-background-color": string;
+        padding: string;
+        "padding-bottom": string;
+        "padding-left": string;
+        "padding-right": string;
+        "padding-top": string;
+        width: string;
+        align: string;
+    };
+    static defaultAttributes: {
+        padding?: string | undefined;
+        "padding-top"?: string | undefined;
+        "padding-bottom"?: string | undefined;
+        "padding-left"?: string | undefined;
+        "padding-right"?: string | undefined;
+        "container-background-color"?: string | undefined;
+        align?: "left" | "center" | "right" | undefined;
+        width?: string | undefined;
+        "border-color"?: string | undefined;
+        "border-style"?: string | undefined;
+        "border-width"?: string | undefined;
+        "css-class"?: string | undefined;
+        "mj-class"?: string | undefined;
+    };
+    getStyles(): {
+        p: {
+            "border-top": string;
+            "font-size": string;
+            "line-height": string;
+            margin: string;
+            width: string;
+        };
+        outlook: {
+            width: string;
+            "border-top": string;
+            "font-size": string;
+            "line-height": string;
+            margin: string;
+        };
+    };
+    getOutlookWidth(): string;
+    renderWithColumn: (children: React.ReactNode) => JSX.Element;
+    renderElement(): JSX.Element;
+}

package/lib/typings/components/Elements/atom/Group.d.ts

@@ -0,0 +1,48 @@
+/// <reference types="react" />
+import { GroupElement, Element } from "easy-email-pro-core";
+import { BaseElement } from "../BaseElement";
+export declare class Group<T extends Element = GroupElement> extends BaseElement<T> {
+    componentType: string;
+    static allowedAttributes: {
+        "background-color": string;
+        direction: string;
+        "vertical-align": string;
+        width: string;
+    };
+    static defaultAttributes: {
+        "background-color"?: string | undefined;
+        direction?: "ltr" | "rtl" | undefined;
+        "vertical-align"?: "middle" | "top" | "bottom" | undefined;
+        width?: string | undefined;
+        "css-class"?: string | undefined;
+        "mj-class"?: string | undefined;
+    };
+    get containerWidth(): string;
+    getStyles(): {
+        div: {
+            "font-size": string;
+            "line-height": string;
+            "text-align": string;
+            display: string;
+            width: string;
+            direction: string;
+            "vertical-align": string;
+            "background-color": string;
+        };
+        tdOutlook: {
+            "vertical-align": string;
+            width: string;
+        };
+    };
+    getParsedWidth(toString?: boolean): string | {
+        unit: string;
+        parsedWidth: any;
+    };
+    getWidthAsPixel(): string;
+    getColumnClassAndMediaQuery(): {
+        className: string;
+        mediaQuery: JSX.Element;
+    };
+    getChildContainerWidth(): string;
+    renderElement(): JSX.Element;
+}

package/lib/typings/components/Elements/atom/Hero.d.ts

@@ -0,0 +1,127 @@
+/// <reference types="react" />
+import { HeroElement, Element } from "easy-email-pro-core";
+import { BaseElement } from "../BaseElement";
+export declare class Hero<T extends Element = HeroElement> extends BaseElement<T> {
+    componentType: string;
+    static allowedAttributes: {
+        mode: string;
+        height: string;
+        "background-url": string;
+        "background-width": string;
+        "background-height": string;
+        "background-position": string;
+        "border-radius": string;
+        "container-background-color": string;
+        "inner-background-color": string;
+        "inner-padding": string;
+        "inner-padding-top": string;
+        "inner-padding-left": string;
+        "inner-padding-right": string;
+        "inner-padding-bottom": string;
+        padding: string;
+        "padding-bottom": string;
+        "padding-left": string;
+        "padding-right": string;
+        "padding-top": string;
+        "background-color": string;
+        "vertical-align": string;
+    };
+    static defaultAttributes: {
+        "background-color"?: string | undefined;
+        "background-position"?: string | undefined;
+        "background-url"?: string | undefined;
+        "border-radius"?: string | undefined;
+        "padding-top"?: string | undefined;
+        "padding-bottom"?: string | undefined;
+        "padding-left"?: string | undefined;
+        "padding-right"?: string | undefined;
+        height?: string | undefined;
+        "vertical-align"?: string | undefined;
+        width?: string | undefined;
+        mode?: "fluid-height" | "fixed-height" | undefined;
+        "background-height"?: string | undefined;
+        "background-width"?: string | undefined;
+        "css-class"?: string | undefined;
+        "mj-class"?: string | undefined;
+    };
+    getParentContainerWidth(): string;
+    getStyles(): {
+        div: {
+            margin: string;
+            "max-width": string;
+        };
+        table: {
+            width: string;
+        };
+        tr: {
+            "vertical-align": string;
+        };
+        "td-fluid": {
+            width: string;
+            "padding-bottom": string;
+            "mso-padding-bottom-alt": string;
+        };
+        hero: {
+            "background-position": string;
+            "background-repeat": string;
+            "border-radius": string;
+            padding: string;
+            "padding-top": string;
+            "padding-left": string;
+            "padding-right": string;
+            "padding-bottom": string;
+            "vertical-align": string;
+            "background-color": string;
+            "background-url": string;
+            "background-size": string;
+        };
+        "outlook-table": {
+            width: string;
+        };
+        "outlook-td": {
+            "line-height": number;
+            "font-size": number;
+            "mso-line-height-rule": string;
+        };
+        "outlook-inner-table": {
+            width: string;
+        };
+        "outlook-image": {
+            border: string;
+            height: string;
+            "mso-position-horizontal": string;
+            position: string;
+            top: number;
+            width: string;
+            "z-index": string;
+        };
+        "outlook-inner-td": {
+            "background-color": string;
+            padding: string;
+            "padding-top": string;
+            "padding-left": string;
+            "padding-right": string;
+            "padding-bottom": string;
+        };
+        "inner-table": {
+            width: string;
+            margin: string;
+        };
+        "inner-div": {
+            "background-color": string;
+            float: string;
+            margin: string;
+            width: string;
+        };
+    };
+    getBackground: () => {
+        "background-color": string;
+        "background-url": string;
+        "background-position": string;
+        "background-repeat": string;
+        "background-size": string;
+    };
+    renderContent(): JSX.Element;
+    renderMode(): JSX.Element;
+    renderElement(): JSX.Element;
+}