@trycourier/react-designer 0.7.0 → 0.8.0

package/dist/types/conditions.types.d.ts

@@ -0,0 +1,21 @@
+export type ElementalConditionOperator = "equals" | "not_equals" | "greater_than" | "less_than" | "greater_than_or_equals" | "less_than_or_equals" | "contains" | "not_contains" | "is_empty" | "is_not_empty";
+export interface ElementalCondition {
+    property: string;
+    operator: ElementalConditionOperator;
+    value?: string;
+}
+export interface ElementalConditionGroup {
+    conditions: ElementalCondition[];
+    logical_operator: "and" | "or";
+}
+/**
+ * Structured condition format for the Elemental `if` field.
+ * An array of condition groups, evaluated with OR logic between groups.
+ * Within each group, conditions are joined by the group's `logical_operator`.
+ */
+export type ElementalConditionExpression = ElementalConditionGroup[];
+/** Union type for the `if` field: legacy string expression or structured conditions. */
+export type ElementalIfCondition = string | ElementalConditionExpression;
+/** Operators that don't require a value (unary checks). */
+export declare const UNARY_OPERATORS: ElementalConditionOperator[];
+export declare const OPERATOR_LABELS: Record<ElementalConditionOperator, string>;

package/dist/types/elemental.types.d.ts

@@ -1,3 +1,4 @@
+import type { ElementalConditionExpression } from "./conditions.types";
 export type Align = "left" | "center" | "right" | "full";
 export type IActionButtonStyle = "button" | "link";
 export type TextStyle = "text" | "h1" | "h2" | "h3" | "subtext";
@@ -17,7 +18,7 @@ export interface ElementalContent {
     version: "2022-01-01";
     elements: ElementalNode[];
 }
-export type ElementalNode = ElementalTextNode | ElementalMetaNode | ElementalChannelNode | ElementalImageNode | ElementalActionNode | ElementalDividerNode | ElementalGroupNode | ElementalQuoteNode | ElementalHtmlNode | ElementalCommentNode | ElementalTextContentNode | ElementalListNode | ElementalListItemNode;
+export type ElementalNode = ElementalTextNode | ElementalMetaNode | ElementalChannelNode | ElementalImageNode | ElementalActionNode | ElementalDividerNode | ElementalGroupNode | ElementalColumnsNode | ElementalColumnNode | ElementalQuoteNode | ElementalHtmlNode | ElementalCommentNode | ElementalTextContentNode | ElementalListNode | ElementalListItemNode;
 export interface ElementalListNode extends IsElementalNode {
     type: "list";
     list_type: "ordered" | "unordered";
@@ -32,6 +33,11 @@ export interface ElementalListItemNode extends IsElementalNode {
     type: "list-item";
     background_color?: string;
     elements: (ElementalTextContentNode | ElementalListNode)[];
+    locales?: ElementalLocales<{
+        content?: string;
+        elements?: ElementalTextContentNode[];
+        _sourceHash?: string;
+    }>;
 }
 export type ElementalTextNode = ElementalTextNodeWithContent | ElementalTextNodeWithElements;
 export interface ElementalTextNodeWithElements extends IsElementalTextNode {
@@ -100,6 +106,9 @@ export interface ElementalChannelNode extends IsElementalNode {
     type: "channel";
     channel: string;
     elements?: ElementalNode[];
+    background_color?: string;
+    content_body_color?: string;
+    font_family?: string;
     raw?: {
         html?: string;
         transformers?: string[];
@@ -193,6 +202,62 @@ export interface ElementalGroupNode extends IsElementalNode {
         elements?: ElementalNode[];
     }>;
 }
+/**
+ * Represents a columns container node that arranges child column elements horizontally.
+ * Used to create multi-column layouts in email templates.
+ */
+export interface ElementalColumnsNode extends IsElementalNode {
+    /** Node type identifier */
+    type: "columns";
+    /** Array of column elements to be arranged horizontally */
+    elements: ElementalColumnNode[];
+    /** Background color for the columns container (e.g., "#ffffff", "transparent") */
+    background_color?: string;
+    /** Border color for the columns container (e.g., "#000000") */
+    border_color?: string;
+    /** Border radius for the columns container (e.g., "8px") */
+    border_radius?: string;
+    /** Border width for the columns container (e.g., "2px") */
+    border_width?: string;
+    /** Gap/spacing between columns (e.g., "10px") */
+    gap?: string;
+    /** Padding for the columns container (e.g., "10px 20px") */
+    padding?: string;
+    /** Vertical alignment of columns within the container */
+    vertical_align?: "top" | "middle" | "bottom";
+    /** Locale-specific overrides for elements */
+    locales?: ElementalLocales<{
+        elements?: ElementalColumnNode[];
+    }>;
+}
+/**
+ * Represents a single column within a columns container.
+ * Contains elements that will be stacked vertically within the column.
+ */
+export interface ElementalColumnNode extends IsElementalNode {
+    /** Node type identifier */
+    type: "column";
+    /** Array of elements to be stacked vertically within this column */
+    elements: ElementalNode[];
+    /** Background color for the column (e.g., "#ffffff", "transparent") */
+    background_color?: string;
+    /** Border color for the column (e.g., "#000000") */
+    border_color?: string;
+    /** Border radius for the column (e.g., "8px") */
+    border_radius?: string;
+    /** Border width for the column (e.g., "2px") */
+    border_width?: string;
+    /** Internal padding for the column content (e.g., "10px", "10px 20px") */
+    padding?: string;
+    /** Vertical alignment of content within this column */
+    vertical_align?: "top" | "middle" | "bottom";
+    /** Column width (e.g., "50%", "200px", "auto") */
+    width?: string;
+    /** Locale-specific overrides for elements */
+    locales?: ElementalLocales<{
+        elements?: ElementalNode[];
+    }>;
+}
 export interface ElementalQuoteNode extends IsElementalNode {
     type: "quote";
     content: string;
@@ -223,7 +288,7 @@ interface IsElementalNode {
     type: string;
     channels?: string[];
     ref?: string;
-    if?: string;
+    if?: string | ElementalConditionExpression;
     loop?: string;
     data?: Record<string, unknown>;
 }

package/dist/types/font.types.d.ts

@@ -0,0 +1,8 @@
+export type FontProvider = "system" | "google";
+export interface FontEntry {
+    name: string;
+    fontFamily: string;
+    sourceType: FontProvider;
+    fontUrl?: string;
+    previewUrl?: string;
+}

package/dist/types/index.d.ts

@@ -2,3 +2,4 @@ export * from "./tiptap.types";
 export * from "./elemental.types";
 export * from "./elemental.schema";
 export * from "./validation.types";
+export * from "./font.types";

package/dist/types/validation.types.d.ts

@@ -1,3 +1,11 @@
+/**
+ * Context about where a variable chip is positioned in the document tree.
+ * Passed to the validate function so consumers can make context-aware decisions.
+ */
+export interface VariableValidationContext {
+    /** Whether the variable is inside a list node that has a loop configured */
+    isInsideLoop: boolean;
+}
 /**
  * Configuration for custom variable validation in the editor.
  * Allows consumers to restrict which variable names are allowed and
@@ -9,15 +17,19 @@ export interface VariableValidationConfig {
      * (unless `overrideFormatValidation` is true).
      *
      * @param variableName - The variable name to validate (without curly braces)
+     * @param context - Positional context about where the variable chip lives
      * @returns true if the variable is allowed, false otherwise
      *
      * @example
      * ```tsx
-     * // Only allow variables from a predefined list
-     * validate: (name) => ['user.name', 'user.email', 'order.total'].includes(name)
+     * // Allow $.item.* only inside loops
+     * validate: (name, ctx) => {
+     *   if (name.startsWith('$.')) return ctx?.isInsideLoop ?? false;
+     *   return allowedPrefixes.some(p => name.startsWith(p));
+     * }
      * ```
      */
-    validate?: (variableName: string) => boolean;
+    validate?: (variableName: string, context?: VariableValidationContext) => boolean;
     /**
      * Behavior when validation fails.
      * - 'mark': Keep the chip with invalid styling (default, shows red styling)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-designer",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "React-based rich text designer component",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -86,7 +86,9 @@
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.0.0",
+    "@tiptap/extension-text-style": "^2.11.5",
     "@types/node": "^20.0.0",
+    "@types/pngjs": "^6.0.5",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.0.0",
     "@vitejs/plugin-react": "^4.0.0",
@@ -98,6 +100,8 @@
     "esbuild-style-plugin": "^1.6.3",
     "jsdom": "^22.1.0",
     "nyc": "^17.1.0",
+    "pixelmatch": "^7.1.0",
+    "pngjs": "^7.0.0",
     "postcss": "^8.4.49",
     "postcss-import": "^16.1.0",
     "postcss-nested": "^7.0.2",
@@ -152,6 +156,7 @@
     "test:coverage:watch": "vitest --coverage",
     "test:e2e": "playwright test --workers=4",
     "test:e2e:fullcycle": "playwright test --config=playwright.fullcycle.config.ts",
+    "test:e2e:fullcycle:update-snapshots": "playwright test --config=playwright.fullcycle.config.ts --update-snapshots",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
     "analyze": "node build.js --analyze",
     "release": "node scripts/publish.js",

package/dist/components/extensions/CustomCode/CustomCode.d.ts

@@ -1,11 +0,0 @@
-import { Node } from "@tiptap/core";
-import type { CustomCodeProps } from "./CustomCode.types";
-declare module "@tiptap/core" {
-    interface Commands<ReturnType> {
-        customCode: {
-            setCustomCode: (props: Partial<CustomCodeProps>) => ReturnType;
-        };
-    }
-}
-export declare const defaultCustomCodeProps: CustomCodeProps;
-export declare const CustomCode: Node<any, any>;

package/dist/components/extensions/CustomCode/CustomCodeComponent.d.ts

@@ -1,9 +0,0 @@
-import { type NodeViewProps } from "@tiptap/react";
-import React from "react";
-import type { CustomCodeProps } from "./CustomCode.types";
-export declare const CustomCodeComponent: React.FC<CustomCodeProps & {
-    nodeKey?: string;
-    selected?: boolean;
-    updateAttributes?: (attrs: Partial<CustomCodeProps>) => void;
-}>;
-export declare const CustomCodeComponentNode: (props: NodeViewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/extensions/CustomCode/index.d.ts

@@ -1,6 +0,0 @@
-export { CustomCode, defaultCustomCodeProps } from "./CustomCode";
-export { CustomCodeComponent, CustomCodeComponentNode } from "./CustomCodeComponent";
-export { MonacoCodeEditor } from "./MonacoCodeEditor";
-export { CustomCodeForm } from "./CustomCodeForm";
-export type { CustomCodeProps } from "./CustomCode.types";
-export { customCodeSchema } from "./CustomCode.types";

package/dist/components/ui/Blocks/CustomCodeBlock/CustomCodeBlock.d.ts

@@ -1,3 +0,0 @@
-import { type BlockBaseProps } from "../Block";
-export declare const CustomCodeBlockIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const CustomCodeBlock: ({ draggable }: Pick<BlockBaseProps, "draggable">) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/Blocks/CustomCodeBlock/index.d.ts

@@ -1 +0,0 @@
-export * from "./CustomCodeBlock";