better-react-email-editor 0.1.0

package/dist/types/i18n/index.d.ts

@@ -0,0 +1,509 @@
+import { en, type Messages } from './en';
+import { fr } from './fr';
+export { en, fr, type Messages };
+/** Built-in locales. Pass your own `messages` to support any other language. */
+export declare const locales: {
+    readonly en: {
+        topBar: {
+            layers: string;
+            toggleLayers: string;
+            undo: string;
+            redo: string;
+            canvasWidth: string;
+            desktop: string;
+            mobile: string;
+            template: string;
+            confirmTemplate: string;
+            import: string;
+            exportJson: string;
+            preview: string;
+            exportHtml: string;
+            invalidFile: (message: string) => string;
+        };
+        preview: {
+            dialogLabel: string;
+            desktop: string;
+            mobile: string;
+            html: string;
+            text: string;
+            copy: string;
+            copied: string;
+            download: string;
+            close: string;
+            rendering: string;
+            renderError: (message: string) => string;
+            iframeTitle: string;
+        };
+        sidebar: {
+            label: string;
+            tabContent: string;
+            tabBlocks: string;
+            tabBody: string;
+            layoutTitle: string;
+            contentTitle: string;
+            dragHint: string;
+            tileTitle: (label: string) => string;
+            propertiesEyebrow: string;
+            closeProperties: string;
+            breadcrumb: string;
+            selectedText: string;
+        };
+        body: {
+            general: string;
+            previewText: string;
+            previewTextPlaceholder: string;
+            background: string;
+            backgroundColor: string;
+            outerPadding: string;
+            content: string;
+            width: string;
+            contentColor: string;
+            innerPadding: string;
+            radius: string;
+            defaultStyles: string;
+            text: string;
+            headings: string;
+            links: string;
+            buttonBackground: string;
+            buttonText: string;
+        };
+        inspector: {
+            typography: string;
+            color: string;
+            size: string;
+            weight: string;
+            weightLight: string;
+            weightNormal: string;
+            weightSemibold: string;
+            weightBold: string;
+            weightExtrabold: string;
+            lineHeight: string;
+            alignment: string;
+            spacing: string;
+            padding: string;
+            box: string;
+            backgroundColor: string;
+            radius: string;
+            border: string;
+            borderColor: string;
+            image: string;
+            uploadImage: string;
+            imageUrl: string;
+            altText: string;
+            altPlaceholder: string;
+            layout: string;
+            autoWidth: string;
+            width: string;
+            action: string;
+            clickLink: string;
+            linkUrl: string;
+            button: string;
+            textColor: string;
+            textSize: string;
+            buttonPadding: string;
+            networks: string;
+            removeNetwork: string;
+            addNetwork: string;
+            appearance: string;
+            iconSize: string;
+            gap: string;
+            columns: string;
+            distribution: string;
+            equal: string;
+            columnGap: string;
+            columnsHint: string;
+            spacer: string;
+            height: string;
+            htmlCode: string;
+            htmlHint: string;
+            line: string;
+            thickness: string;
+            lineStyle: string;
+            heading: string;
+            level: string;
+            formatting: string;
+            bold: string;
+            italic: string;
+            underline: string;
+            strike: string;
+            link: string;
+            url: string;
+            linkColor: string;
+        };
+        fields: {
+            colorDefault: string;
+            chooseColor: (value: string) => string;
+            hexCode: string;
+            eyedropper: string;
+            documentColors: string;
+            palette: string;
+            resetColor: string;
+            alignLeft: string;
+            alignCenter: string;
+            alignRight: string;
+            top: string;
+            right: string;
+            bottom: string;
+            left: string;
+            moreOptions: string;
+            auto: string;
+        };
+        layers: {
+            title: string;
+            expandAll: string;
+            collapseAll: string;
+            close: string;
+            tree: string;
+            emptyEmail: string;
+            emptyZone: string;
+            column: (index: number) => string;
+            fixedHint: string;
+            itemHint: string;
+            expand: string;
+            collapse: string;
+            uploadedImage: string;
+            empty: string;
+        };
+        canvas: {
+            dropHere: string;
+            dropLabel: (label: string) => string;
+            emptyZone: string;
+            move: string;
+            moveLabel: (label: string) => string;
+            selectParent: (label: string) => string;
+            duplicate: string;
+            delete: string;
+        };
+        placeholder: {
+            heading: string;
+            paragraph: string;
+        };
+        nodes: Record<string, string>;
+        palette: {
+            oneColumn: string;
+            twoColumns: string;
+            threeColumns: string;
+            fourColumns: string;
+            heading: string;
+            text: string;
+            button: string;
+            image: string;
+            divider: string;
+            spacer: string;
+            social: string;
+            menu: string;
+            list: string;
+            quote: string;
+            html: string;
+            card: string;
+        };
+        templates: {
+            header: string;
+            headerDescription: string;
+            hero: string;
+            heroDescription: string;
+            products: string;
+            productsDescription: string;
+            features: string;
+            featuresDescription: string;
+            testimonial: string;
+            testimonialDescription: string;
+            footer: string;
+            footerDescription: string;
+        };
+        content: {
+            heading: string;
+            text: string;
+            button: string;
+            image: string;
+            menuHome: string;
+            menuShop: string;
+            menuBlog: string;
+            menuContact: string;
+            listItems: string[];
+            quote: string;
+            html: string;
+            cardTitle: string;
+            cardText: string;
+            logo: string;
+            heroTitle: string;
+            heroText: string;
+            heroButton: string;
+            productA: string;
+            productB: string;
+            productText: string;
+            productButton: string;
+            features: string[];
+            featureText: string;
+            testimonialQuote: string;
+            testimonialAuthor: string;
+            footerAddress: string;
+            unsubscribe: string;
+            starterTitle: string;
+        };
+        slashCommands: Record<string, {
+            title: string;
+            description: string;
+        }>;
+    };
+    readonly fr: {
+        topBar: {
+            layers: string;
+            toggleLayers: string;
+            undo: string;
+            redo: string;
+            canvasWidth: string;
+            desktop: string;
+            mobile: string;
+            template: string;
+            confirmTemplate: string;
+            import: string;
+            exportJson: string;
+            preview: string;
+            exportHtml: string;
+            invalidFile: (message: string) => string;
+        };
+        preview: {
+            dialogLabel: string;
+            desktop: string;
+            mobile: string;
+            html: string;
+            text: string;
+            copy: string;
+            copied: string;
+            download: string;
+            close: string;
+            rendering: string;
+            renderError: (message: string) => string;
+            iframeTitle: string;
+        };
+        sidebar: {
+            label: string;
+            tabContent: string;
+            tabBlocks: string;
+            tabBody: string;
+            layoutTitle: string;
+            contentTitle: string;
+            dragHint: string;
+            tileTitle: (label: string) => string;
+            propertiesEyebrow: string;
+            closeProperties: string;
+            breadcrumb: string;
+            selectedText: string;
+        };
+        body: {
+            general: string;
+            previewText: string;
+            previewTextPlaceholder: string;
+            background: string;
+            backgroundColor: string;
+            outerPadding: string;
+            content: string;
+            width: string;
+            contentColor: string;
+            innerPadding: string;
+            radius: string;
+            defaultStyles: string;
+            text: string;
+            headings: string;
+            links: string;
+            buttonBackground: string;
+            buttonText: string;
+        };
+        inspector: {
+            typography: string;
+            color: string;
+            size: string;
+            weight: string;
+            weightLight: string;
+            weightNormal: string;
+            weightSemibold: string;
+            weightBold: string;
+            weightExtrabold: string;
+            lineHeight: string;
+            alignment: string;
+            spacing: string;
+            padding: string;
+            box: string;
+            backgroundColor: string;
+            radius: string;
+            border: string;
+            borderColor: string;
+            image: string;
+            uploadImage: string;
+            imageUrl: string;
+            altText: string;
+            altPlaceholder: string;
+            layout: string;
+            autoWidth: string;
+            width: string;
+            action: string;
+            clickLink: string;
+            linkUrl: string;
+            button: string;
+            textColor: string;
+            textSize: string;
+            buttonPadding: string;
+            networks: string;
+            removeNetwork: string;
+            addNetwork: string;
+            appearance: string;
+            iconSize: string;
+            gap: string;
+            columns: string;
+            distribution: string;
+            equal: string;
+            columnGap: string;
+            columnsHint: string;
+            spacer: string;
+            height: string;
+            htmlCode: string;
+            htmlHint: string;
+            line: string;
+            thickness: string;
+            lineStyle: string;
+            heading: string;
+            level: string;
+            formatting: string;
+            bold: string;
+            italic: string;
+            underline: string;
+            strike: string;
+            link: string;
+            url: string;
+            linkColor: string;
+        };
+        fields: {
+            colorDefault: string;
+            chooseColor: (value: string) => string;
+            hexCode: string;
+            eyedropper: string;
+            documentColors: string;
+            palette: string;
+            resetColor: string;
+            alignLeft: string;
+            alignCenter: string;
+            alignRight: string;
+            top: string;
+            right: string;
+            bottom: string;
+            left: string;
+            moreOptions: string;
+            auto: string;
+        };
+        layers: {
+            title: string;
+            expandAll: string;
+            collapseAll: string;
+            close: string;
+            tree: string;
+            emptyEmail: string;
+            emptyZone: string;
+            column: (index: number) => string;
+            fixedHint: string;
+            itemHint: string;
+            expand: string;
+            collapse: string;
+            uploadedImage: string;
+            empty: string;
+        };
+        canvas: {
+            dropHere: string;
+            dropLabel: (label: string) => string;
+            emptyZone: string;
+            move: string;
+            moveLabel: (label: string) => string;
+            selectParent: (label: string) => string;
+            duplicate: string;
+            delete: string;
+        };
+        placeholder: {
+            heading: string;
+            paragraph: string;
+        };
+        nodes: Record<string, string>;
+        palette: {
+            oneColumn: string;
+            twoColumns: string;
+            threeColumns: string;
+            fourColumns: string;
+            heading: string;
+            text: string;
+            button: string;
+            image: string;
+            divider: string;
+            spacer: string;
+            social: string;
+            menu: string;
+            list: string;
+            quote: string;
+            html: string;
+            card: string;
+        };
+        templates: {
+            header: string;
+            headerDescription: string;
+            hero: string;
+            heroDescription: string;
+            products: string;
+            productsDescription: string;
+            features: string;
+            featuresDescription: string;
+            testimonial: string;
+            testimonialDescription: string;
+            footer: string;
+            footerDescription: string;
+        };
+        content: {
+            heading: string;
+            text: string;
+            button: string;
+            image: string;
+            menuHome: string;
+            menuShop: string;
+            menuBlog: string;
+            menuContact: string;
+            listItems: string[];
+            quote: string;
+            html: string;
+            cardTitle: string;
+            cardText: string;
+            logo: string;
+            heroTitle: string;
+            heroText: string;
+            heroButton: string;
+            productA: string;
+            productB: string;
+            productText: string;
+            productButton: string;
+            features: string[];
+            featureText: string;
+            testimonialQuote: string;
+            testimonialAuthor: string;
+            footerAddress: string;
+            unsubscribe: string;
+            starterTitle: string;
+        };
+        slashCommands: Record<string, {
+            title: string;
+            description: string;
+        }>;
+    };
+};
+export type BuiltInLocale = keyof typeof locales;
+export interface I18n {
+    locale: string;
+    t: Messages;
+}
+/**
+ * A user-facing string: plain text, or a function of the current locale.
+ * Lets custom palette items and templates follow the editor's language.
+ */
+export type Label = string | ((i18n: I18n) => string);
+export declare function resolveLabel(label: Label, i18n: I18n): string;
+type DeepPartial<T> = {
+    [K in keyof T]?: T[K] extends (...args: never[]) => unknown ? T[K] : T[K] extends readonly unknown[] ? T[K] : T[K] extends object ? DeepPartial<T[K]> : T[K];
+};
+export type PartialMessages = DeepPartial<Messages>;
+/** Built-in locale (falls back to English) with optional overrides on top. */
+export declare function resolveMessages(locale: string, overrides?: PartialMessages): Messages;

package/dist/types/index.d.ts

@@ -0,0 +1,37 @@
+export { BetterEmailEditor, type BetterEmailEditorProps, type BetterEmailEditorComponents } from './components/BetterEmailEditor';
+export { EditorRoot, useEmailEditor, useOptionalEmailEditor, useI18n, useMessages, defaultTheme, readFileAsDataUrl, type EditorRootProps, type EmailEditorHandle, type EmailEditorContextValue, type EmailValue, type EmailSettings, type EmailExport, type Device, } from './context';
+export { Canvas, type CanvasProps } from './components/Canvas';
+export { CanvasOverlay } from './components/CanvasOverlay';
+export { TopBar, LayersToggle, UndoRedo, DeviceToggle, TemplateButton, ImportButton, ExportJsonButton, PreviewButton, ExportHtmlButton, type TopBarProps, type PreviewButtonProps, } from './components/TopBar';
+export { LayersPanel, type LayersPanelProps } from './components/LayersPanel';
+export { Sidebar, type SidebarProps } from './components/Sidebar';
+export { ContentPanel, type ContentPanelProps, type ContentPanelTab } from './components/ContentPanel';
+export { ContentTab, PaletteTile, type ContentTabProps, type PaletteTileProps } from './components/ContentTab';
+export { BlocksTab, TemplateCard, type BlocksTabProps, type TemplateCardProps } from './components/BlocksTab';
+export { BodyTab, type BodyTabProps, type DocumentContext } from './components/BodyTab';
+export { PropertiesPanel, useDeselect, type PropertiesPanelProps } from './components/PropertiesPanel';
+export { BlockProperties, type BlockPropertiesProps } from './components/BlockProperties';
+export { TextProperties, type TextPropertiesProps } from './components/TextProperties';
+export { PreviewDialog, download, type PreviewDialogProps, type PreviewView } from './components/PreviewDialog';
+export { useDraggableBlock } from './components/useDraggableBlock';
+export { DefaultInspector } from './components/inspectors/DefaultInspector';
+export { HeadingInspector } from './components/inspectors/HeadingInspector';
+export { ImageInspector } from './components/inspectors/ImageInspector';
+export { ButtonInspector } from './components/inspectors/ButtonInspector';
+export { SocialLinksInspector } from './components/inspectors/SocialLinksInspector';
+export { ColumnsInspector } from './components/inspectors/ColumnsInspector';
+export { SpacerInspector, HtmlInspector, DividerInspector, ContainerInspector } from './components/inspectors/SimpleInspectors';
+export { TypographyGroup, SpacingGroup, BoxGroup, css, type TypographyGroupProps, type SpacingGroupProps, type BoxGroupProps, } from './components/inspectors/groups';
+export { Group, Field, TextInput, TextArea, NumberInput, RangeInput, ColorInput, Select, Segmented, AlignInput, PaddingInput, toHex, DEFAULT_SWATCHES, type GroupProps, type FieldProps, type TextInputProps, type TextAreaProps, type NumberInputProps, type RangeInputProps, type ColorInputProps, type SelectProps, type SegmentedProps, type AlignInputProps, type PaddingInputProps, type Side, } from './components/fields';
+export * as icons from './components/icons';
+export { defaultNodes, textPreview, truncate } from './registry/default-nodes';
+export { defaultPalette, defaultPaletteGroups, menuParagraph } from './registry/default-palette';
+export { defaultTemplates, createStarterDocument, TemplateThumbnail } from './registry/default-templates';
+export type { NodeDefinition, PaletteItem, PaletteGroup, TemplateItem, InspectorProps, IconComponent } from './registry/types';
+export { Spacer, SocialLinks, HtmlBlock, SOCIAL_NETWORKS, iconUrl, type SocialLink } from './nodes/custom-nodes';
+export { en, fr, locales, resolveMessages, resolveLabel, type Messages, type PartialMessages, type I18n, type Label, type BuiltInLocale } from './i18n';
+export * as content from './core/content';
+export { BLOCK_CONTAINERS, COLUMN_PARENTS, appendBlocks, applyDrop, findDropTarget, selectedUnit, selectUnit, duplicateUnit, deleteUnit, parentUnit, unitAt, type BlockUnit, type DragPayload, type DropTarget, } from './core/dnd';
+export { EmailButton } from './core/paste';
+export { inlineStyleToObject } from './core/style-utils';
+export { cx, type StyleProps } from './core/cx';

package/dist/types/nodes/custom-nodes.d.ts

@@ -0,0 +1,19 @@
+import { EmailNode } from '@react-email/editor/core';
+export declare const Spacer: EmailNode<Record<string, never>, Record<string, never>>;
+export interface SocialLink {
+    network: string;
+    url: string;
+}
+/**
+ * Icons come from the Simple Icons CDN. For maximum client support (Gmail
+ * does not render SVG) host PNG versions and swap `iconUrl`.
+ */
+export declare const SOCIAL_NETWORKS: Record<string, {
+    label: string;
+    slug: string;
+    color: string;
+}>;
+export declare function iconUrl(network: string): string;
+export declare const SocialLinks: EmailNode<Record<string, never>, Record<string, never>>;
+export declare const HtmlBlock: EmailNode<Record<string, never>, Record<string, never>>;
+export declare const customNodes: EmailNode<Record<string, never>, Record<string, never>>[];

package/dist/types/registry/default-nodes.d.ts

@@ -0,0 +1,7 @@
+import type { Node as PMNode } from '@tiptap/pm/model';
+import type { I18n } from '../i18n';
+import type { NodeDefinition } from './types';
+export declare function truncate(text: string, max?: number): string;
+/** Text content, or "empty". The default preview of text-like nodes. */
+export declare const textPreview: (node: PMNode, { t }: I18n) => string;
+export declare const defaultNodes: NodeDefinition[];

package/dist/types/registry/default-palette.d.ts

@@ -0,0 +1,7 @@
+import type { JSONContent } from '@tiptap/core';
+import type { I18n } from '../i18n';
+import type { PaletteGroup, PaletteItem } from './types';
+/** A text menu (Home · Shop · Blog · Contact), shared by the palette and the header template. */
+export declare const menuParagraph: ({ t }: I18n, alignment?: string) => JSONContent;
+export declare const defaultPaletteGroups: PaletteGroup[];
+export declare const defaultPalette: PaletteItem[];

package/dist/types/registry/default-templates.d.ts

@@ -0,0 +1,10 @@
+import type { JSONContent } from '@tiptap/core';
+import type { I18n } from '../i18n';
+import type { TemplateItem } from './types';
+/** Abstract wireframe used as the card preview of the built-in templates. */
+export declare function TemplateThumbnail({ variant }: {
+    variant: string;
+}): import("react").JSX.Element;
+export declare const defaultTemplates: TemplateItem[];
+/** The demo email: header, hero, products and footer. */
+export declare function createStarterDocument(i18n: I18n): JSONContent;

package/dist/types/registry/types.d.ts

@@ -0,0 +1,56 @@
+import type { AnyExtension, JSONContent } from '@tiptap/core';
+import type { Node as PMNode } from '@tiptap/pm/model';
+import type { InspectorNodeContext } from '@react-email/editor/ui';
+import type { ComponentType, ReactNode } from 'react';
+import type { StyleProps } from '../core/cx';
+import type { I18n, Label } from '../i18n';
+export type IconComponent = ComponentType<{
+    size?: number;
+}>;
+/** Props given to a block's properties panel. */
+export interface InspectorProps extends StyleProps {
+    /** The package's inspector context: getStyle / setStyle / getAttr / setAttr… */
+    ctx: InspectorNodeContext;
+}
+/**
+ * Describes one node type (block) of the email: how it is named, shown in
+ * the layers panel and edited in the properties panel. Custom nodes also
+ * bring their Tiptap extension.
+ */
+export interface NodeDefinition {
+    /** ProseMirror node type name, e.g. "image" or "spacer". */
+    type: string;
+    /** Display name. Defaults to `messages.nodes[type]`, then to `type`. */
+    label?: Label;
+    /** Icon in the layers panel. */
+    icon?: IconComponent;
+    /** Properties panel shown when the block is selected. Defaults to `DefaultInspector`. */
+    inspector?: ComponentType<InspectorProps>;
+    /** Short content hint shown next to the label in the layers panel. */
+    preview?: (node: PMNode, i18n: I18n) => string;
+    /** Tiptap extensions the node needs (custom nodes created with `EmailNode.create`). */
+    extensions?: AnyExtension[];
+}
+/** A draggable tile of the "Content" tab. */
+export interface PaletteItem {
+    id: string;
+    /** Group id: "layout" and "content" are built in, any other id creates a new group. */
+    group: string;
+    label: Label;
+    icon: ReactNode;
+    /** Blocks inserted on drop or click. Called on every insertion. */
+    content: (i18n: I18n) => JSONContent[];
+}
+export interface PaletteGroup {
+    id: string;
+    title: Label;
+}
+/** A prebuilt row of the "Blocks" tab. */
+export interface TemplateItem {
+    id: string;
+    label: Label;
+    description?: Label;
+    /** Small preview drawn in the card. */
+    thumbnail?: ReactNode;
+    content: (i18n: I18n) => JSONContent[];
+}