@trycourier/react-designer 0.5.1 → 0.7.0

package/dist/hooks/useAutoSave.d.ts

@@ -8,6 +8,7 @@ interface UseAutoSaveOptions<T> {
 }
 export declare function useAutoSave<T>({ onSave, debounceMs, enabled, onError, initialContent, flushBeforeSave, }: UseAutoSaveOptions<T>): {
     handleAutoSave: (content: T) => Promise<void>;
+    flush: () => Promise<void>;
     isSaving: boolean;
 };
 export {};

package/dist/index.d.ts

@@ -16,5 +16,8 @@ export { Status as TemplateStatus } from "@/components/ui/Status";
 export { ToggleGroup, ToggleGroupItem, Toggle, Divider, Input, InputColor, } from "@/components/ui-kit";
 export { FacebookIcon, InstagramIcon, LinkedinIcon, MediumIcon, XIcon, } from "@/components/ui-kit/Icon";
 export { cn, convertElementalToTiptap, convertTiptapToElemental } from "@/lib/utils";
+export { blockDefaults } from "@/lib/constants/block-defaults";
+export { EMAIL_EDITOR_TEXT_STYLES, EMAIL_EDITOR_FONT_FAMILY, } from "@/lib/constants/email-editor-tiptap-styles";
 export { useAutoSave } from "@/hooks/useAutoSave";
 export { MonacoCodeEditor } from "@/components/extensions/CustomCode/MonacoCodeEditor";
+export { applyShadowDomDndFix } from "@/components/utils/shadowDomDndFix";

package/dist/lib/constants/block-defaults.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Central re-export of block default props. Each block's defaults live in its own
+ * extension (e.g. Blockquote/Blockquote.ts); this file only aggregates them for
+ * consumers (e.g. Studio's elemental-to-HTML converter) via blockDefaults.
+ */
+export { defaultBlockquoteProps, QUOTE_TEXT_STYLE, QUOTE_TEXT_STYLE_VARIANTS, } from "@/components/extensions/Blockquote/Blockquote";
+export { defaultButtonProps } from "@/components/extensions/Button/Button";
+export { defaultDividerProps, defaultSpacerProps } from "@/components/extensions/Divider/Divider";
+export { defaultImageProps } from "@/components/extensions/ImageBlock/ImageBlock";
+export { defaultTextBlockProps } from "@/components/extensions/TextBlock/TextBlock.types";
+export { defaultListProps } from "@/components/extensions/List";
+/**
+ * Single namespace for all block defaults.
+ * Use: import { blockDefaults } from '@trycourier/react-designer'
+ * Then: blockDefaults.blockquote, blockDefaults.button, blockDefaults.quoteTextStyle, etc.
+ */
+export declare const blockDefaults: {
+    readonly blockquote: {
+        backgroundColor: string;
+        borderColor: string;
+        paddingVertical: number;
+        paddingHorizontal: number;
+        borderLeftWidth: number;
+        id?: string | undefined;
+    };
+    readonly button: import("../../components/extensions/Button").ButtonProps;
+    readonly divider: import("../../components/extensions/Divider").DividerProps;
+    readonly spacer: import("../../components/extensions/Divider").DividerProps;
+    readonly image: import("../../components/extensions/ImageBlock").ImageBlockProps;
+    readonly text: import("@/components/extensions/TextBlock/TextBlock.types").TextBlockProps;
+    readonly list: import("@/components/extensions/List").ListProps;
+    readonly quoteTextStyle: {
+        readonly color: "#696969";
+        readonly fontSize: "14px";
+        readonly lineHeight: "18px";
+        readonly fontStyle: "italic";
+    };
+    readonly quoteTextStyleVariants: Record<"h1" | "h2" | "h3" | "subtext" | "quote", {
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+    }>;
+};

package/dist/lib/constants/email-editor-tiptap-styles.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Single source of truth for .courier-email-editor .tiptap font styles.
+ * These values are applied via CSS custom properties from EmailEditorContainer
+ * so styles.css can use var(--email-editor-*) and stay in sync.
+ */
+export declare const EMAIL_EDITOR_FONT_FAMILY = "Helvetica, Arial, sans-serif";
+/** Paragraph and heading styles (non-blockquote) for email editor. */
+export declare const EMAIL_EDITOR_TEXT_STYLES: {
+    readonly p: {
+        readonly color: "#000000";
+        readonly fontSize: "14px";
+        readonly lineHeight: "18px";
+    };
+    readonly h1: {
+        readonly color: "#000000";
+        readonly fontSize: "32px";
+        readonly fontWeight: "600";
+        readonly lineHeight: "40px";
+    };
+    readonly h2: {
+        readonly color: "#000000";
+        readonly fontSize: "24px";
+        readonly fontWeight: "600";
+        readonly lineHeight: "32px";
+    };
+    readonly h3: {
+        readonly color: "#000000";
+        readonly fontSize: "18.72px";
+        readonly fontWeight: "600";
+        readonly lineHeight: "24px";
+    };
+    readonly subtext: {
+        readonly color: "#8F8F8F";
+        readonly fontSize: "11px";
+        readonly lineHeight: "15px";
+    };
+};
+/**
+ * Text style applied to quote body content.
+ * Matches backend courier-email-text-style quote defaults.
+ */
+export declare const QUOTE_TEXT_STYLE: {
+    readonly color: "#696969";
+    readonly fontSize: "14px";
+    readonly lineHeight: "18px";
+    readonly fontStyle: "italic";
+};
+/**
+ * Quote text style variants when text_style is h1/h2/h3/subtext.
+ * Derives sizing from EMAIL_EDITOR_TEXT_STYLES to stay in sync.
+ */
+export declare const QUOTE_TEXT_STYLE_VARIANTS: Record<"h1" | "h2" | "h3" | "subtext" | "quote", {
+    fontSize: string;
+    fontWeight: string;
+    lineHeight: string;
+}>;
+/**
+ * Returns CSS custom properties to set on .courier-email-editor so that
+ * .courier-email-editor .tiptap rules in styles.css (using var(--email-editor-*))
+ * resolve from this single source of truth.
+ */
+export declare function getEmailEditorTiptapCssVars(): Record<string, string>;

package/dist/lib/index.d.ts

@@ -1 +1,2 @@
 export * from "./utils";
+export * from "./constants/block-defaults";

package/dist/lib/testHelpers.d.ts

@@ -1,6 +1,7 @@
 import type { Editor } from "@tiptap/react";
 import type { ElementalContent } from "@/types/elemental.types";
 type ChannelType = "email" | "sms" | "push" | "inbox" | "slack" | "teams";
+type TestChannelType = "email" | "sms" | "push" | "inbox" | "slack" | "msteams";
 declare global {
     interface Window {
         __COURIER_CREATE_TEST__?: {
@@ -13,8 +14,27 @@ declare global {
                 teams: Editor | null;
             };
             currentEditor: Editor | null;
-            activeChannel: "email" | "sms" | "push" | "inbox" | "slack" | "teams" | null;
+            activeChannel: ChannelType | null;
             templateEditorContent: ElementalContent | null | undefined;
+            /**
+             * Programmatically set the template editor content.
+             * This is used for testing API-based content updates.
+             */
+            setTemplateEditorContent?: (content: ElementalContent | null) => void;
+            /**
+             * Get the current template editor content.
+             * Useful for verifying content state in tests.
+             */
+            getTemplateEditorContent?: () => ElementalContent | null | undefined;
+            /**
+             * Switch to a specific channel.
+             * Used in E2E tests to programmatically change channels.
+             */
+            setChannel?: (channel: TestChannelType) => void;
+            /**
+             * Get the current active channel.
+             */
+            getChannel?: () => TestChannelType | null;
         };
     }
 }

package/dist/lib/utils/convertElementalToTiptap/convertElementalToTiptap.d.ts

@@ -1,4 +1,9 @@
-import type { TiptapNode, ElementalContent, TiptapDoc } from "../../../types";
+import type { TiptapNode, ElementalContent, ElementalTextContentNode, TiptapDoc } from "../../../types";
+/**
+ * Convert an Elemental elements array (type: "string" | "link" sub-elements with boolean
+ * formatting flags) into TipTap nodes. Handles variables ({{var}}) and newlines (\n → hardBreak).
+ */
+export declare function convertElementsArrayToTiptapNodes(elements: ElementalTextContentNode[]): TiptapNode[];
 export declare function parseMDContent(content: string): TiptapNode[];
 export interface ConvertElementalToTiptapOptions {
     channel?: string;

package/dist/lib/utils/getTitle/index.d.ts

@@ -1,2 +1,2 @@
 export { getTitle, getTitleFromContent, getTitleForChannel } from "./getTitle";
-export { getSubjectStorageFormat, createTitleUpdate, extractCurrentTitle, cleanSMSElements, cleanPushElements, cleanInboxElements, } from "./preserveStorageFormat";
+export { getSubjectStorageFormat, createTitleUpdate, extractCurrentTitle, extractPlainTextFromNode, cleanSMSElements, cleanPushElements, cleanInboxElements, } from "./preserveStorageFormat";

package/dist/lib/utils/getTitle/preserveStorageFormat.d.ts

@@ -1,10 +1,17 @@
 import type { ElementalContent, ElementalNode } from "@/types/elemental.types";
+/**
+ * Extract plain text from an ElementalNode, handling both simple format ({ content: "..." })
+ * and rich format ({ elements: [{ type: "string", content: "..." }, ...] }).
+ * The rich format is produced by convertTiptapToElemental for heading/paragraph nodes.
+ */
+export declare function extractPlainTextFromNode(element: ElementalNode): string;
 /**
  * Cleans an Inbox element by removing styling properties from text and action elements.
  */
 export declare function cleanInboxElements(elements: ElementalNode[]): ElementalNode[];
 /**
  * Cleans Push elements by removing styling properties from text elements.
+ * Handles both simple format ({ content: "..." }) and rich format ({ elements: [...] }).
  */
 export declare function cleanPushElements(elements: ElementalNode[]): ElementalNode[];
 /**