better-react-email-editor 0.1.0

package/dist/types/core/dnd.d.ts

@@ -0,0 +1,73 @@
+import type { Editor, JSONContent } from '@tiptap/core';
+import { Fragment, type Node as PMNode } from '@tiptap/pm/model';
+import { type Transaction } from '@tiptap/pm/state';
+import type { EditorView } from '@tiptap/pm/view';
+/** Nodes whose children are free-flowing blocks (the "drop zones"). */
+export declare const BLOCK_CONTAINERS: Set<string>;
+/** Row-like nodes whose children are columns laid out horizontally. */
+export declare const COLUMN_PARENTS: Set<string>;
+export declare const DND_MIME = "application/x-email-block";
+export type DragPayload = {
+    kind: 'new';
+    label: string;
+    content: () => JSONContent[];
+} | {
+    kind: 'move';
+    pos: number;
+    label: string;
+};
+export interface DropTarget {
+    /** Document position where the content will be inserted. */
+    pos: number;
+    /** When set, the range [pos, replaceTo) is replaced (empty placeholder paragraph). */
+    replaceTo?: number;
+    /** Indicator geometry in client coordinates (canvas drops only). */
+    line?: {
+        top: number;
+        left: number;
+        width: number;
+    };
+    /** Whether the target is an empty drop zone (shows a filled zone instead of a line). */
+    emptyZone?: {
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+    };
+}
+export declare function isEmptyParagraph(node: PMNode): boolean;
+export declare function findRootContainer(doc: PMNode): {
+    node: PMNode;
+    pos: number;
+} | null;
+/**
+ * Finds where content dragged at (x, y) should land. Walks down from the email
+ * container into sections and columns, then picks the gap between children
+ * closest to the pointer — the same mental model as Unlayer's rows/contents.
+ */
+export declare function findDropTarget(view: EditorView, x: number, y: number, fragment: Fragment, exclude?: {
+    from: number;
+    to: number;
+}): DropTarget | null;
+/** Builds the PM fragment for a drag payload. */
+export declare function payloadFragment(view: EditorView, payload: DragPayload): Fragment | null;
+/** Applies a drop. Returns true when the document changed. */
+export declare function applyDrop(editor: Editor, payload: DragPayload, rawTarget: DropTarget): boolean;
+/** Deletes a node; keeps its parent valid by leaving an empty paragraph if needed. */
+export declare function removeNode(tr: Transaction, from: number, to: number): void;
+export interface BlockUnit {
+    pos: number;
+    node: PMNode;
+}
+/** The innermost node at `pos` (or one of its ancestors) that sits directly in a drop zone. */
+export declare function unitAt(doc: PMNode, pos: number, includeSelf?: boolean): BlockUnit | null;
+/** Columns live in fixed-size rows: they can be selected but not moved, duplicated or deleted. */
+export declare function isFixedUnit(unit: BlockUnit): boolean;
+/** The unit enclosing `unit` (e.g. paragraph -> its columns row). */
+export declare function parentUnit(doc: PMNode, unit: BlockUnit): BlockUnit | null;
+export declare function selectedUnit(editor: Editor): BlockUnit | null;
+export declare function selectUnit(editor: Editor, unit: BlockUnit): void;
+export declare function duplicateUnit(editor: Editor, unit: BlockUnit): void;
+export declare function deleteUnit(editor: Editor, unit: BlockUnit): void;
+/** Appends blocks at the end of the email (click-to-insert from the palette). */
+export declare function appendBlocks(editor: Editor, content: JSONContent[]): void;

package/dist/types/core/layers.d.ts

@@ -0,0 +1,27 @@
+import type { Fragment, Node as PMNode } from '@tiptap/pm/model';
+import { type DropTarget } from './dnd';
+export interface LayerItem {
+    /** Stable-ish key built from the child indexes ("0.2.1"). */
+    key: string;
+    pos: number;
+    node: PMNode;
+    depth: number;
+    /** 1-based index among siblings (used to name columns). */
+    index: number;
+    children: LayerItem[];
+    /** Accepts blocks dropped "inside" (section, column). */
+    accepts: boolean;
+    /** Can't be moved (columns are locked in their row). */
+    fixed: boolean;
+    /** Drop zone holding nothing but its placeholder paragraph. */
+    empty: boolean;
+}
+export declare function buildLayers(doc: PMNode): LayerItem[];
+export type LayerZone = 'before' | 'after' | 'inside';
+/** Which part of a row the pointer is over, given what the row can accept. */
+export declare function zoneFor(item: LayerItem, ratio: number): LayerZone;
+/** Translates a layers-panel drop into a document position, validated by the schema. */
+export declare function layerDropTarget(doc: PMNode, item: LayerItem, zone: LayerZone, fragment: Fragment, exclude?: {
+    from: number;
+    to: number;
+}): DropTarget | null;

package/dist/types/core/paste-handler.d.ts

@@ -0,0 +1,9 @@
+import type { Extensions } from '@tiptap/core';
+import type { Slice } from '@tiptap/pm/model';
+import type { EditorView } from '@tiptap/pm/view';
+/**
+ * Drops dangerous elements and URL schemes. Content copied from the editor
+ * (node-* classes) keeps its attributes; external content keeps semantic HTML only.
+ */
+export declare function sanitizePastedHtml(html: string): string;
+export declare function createPasteHandler(extensions: Extensions): (view: EditorView, event: ClipboardEvent, slice: Slice) => boolean;

package/dist/types/core/paste.d.ts

@@ -0,0 +1,22 @@
+import type { Editor } from '@tiptap/core';
+/**
+ * The package's Button renders `data-href` and wraps the link in
+ * `div.align-*`, but its parseHTML reads neither: a copied button came back
+ * with href "#" and left-aligned. Read them back so copy/paste round-trips.
+ */
+export declare const EmailButton: import("@react-email/editor/core").EmailNode<import("@react-email/editor/extensions").EditorButtonOptions, Record<string, never>>;
+/**
+ * Block-friendly paste, wired as a capture-phase `paste` listener on the canvas:
+ *
+ * 1. With a block selected (NodeSelection), ProseMirror would *replace* it.
+ *    Builders (Unlayer, Elementor) paste *after* it instead, so copy + paste on
+ *    the same block duplicates it. We open an empty paragraph after the block
+ *    and paste there.
+ * 2. Content copied from this editor (`data-pm-slice`) is replayed through
+ *    `view.pasteHTML` without clipboard data, which makes the package's paste
+ *    handler step aside and lets ProseMirror restore the exact slice.
+ *    External HTML still goes through the package's sanitizer.
+ *
+ * Returns true when the event was handled.
+ */
+export declare function handleCanvasPaste(editor: Editor, event: ClipboardEvent): boolean;

package/dist/types/core/stores.d.ts

@@ -0,0 +1,19 @@
+import type { DragPayload } from './dnd';
+/**
+ * Per-editor state shared by the canvas, the palette and the layers panel.
+ * One instance lives in each `EditorRoot`, so several editors can coexist on a page.
+ */
+/** Only one drag happens at a time; `dragover` can't read dataTransfer payloads, so the active payload lives here. */
+export interface DragSession {
+    get: () => DragPayload | null;
+    start: (payload: DragPayload) => void;
+    end: () => void;
+}
+export declare function createDragSession(): DragSession;
+/** Hovered block position: the canvas and the layers panel highlight the same block. */
+export interface HoverStore {
+    get: () => number | null;
+    set: (pos: number | null) => void;
+    subscribe: (listener: () => void) => () => void;
+}
+export declare function createHoverStore(): HoverStore;

package/dist/types/core/style-utils.d.ts

@@ -0,0 +1,3 @@
+import type { CSSProperties } from 'react';
+/** "padding-top: 4px; color: red" -> { paddingTop: '4px', color: 'red' } */
+export declare function inlineStyleToObject(style: unknown): CSSProperties;

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

@@ -0,0 +1,247 @@
+/** English UI strings (default locale). Every other locale implements the same shape. */
+export declare const 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;
+    };
+    /** Default text inserted by the palette, the templates and the starter email. */
+    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;
+    };
+    /** Translations of the package's “/” commands, keyed by their English title. */
+    slashCommands: Record<string, {
+        title: string;
+        description: string;
+    }>;
+};
+export type Messages = typeof en;

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

@@ -0,0 +1,3 @@
+import type { Messages } from './en';
+/** Textes de l'interface en français. */
+export declare const fr: Messages;