@savvycal/mjml-editor 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,150 @@
+import { JSX } from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+export declare type ContentBlockType = 'mj-text' | 'mj-image' | 'mj-button' | 'mj-divider' | 'mj-spacer';
+
+export declare type EditorAction = {
+    type: 'SELECT_BLOCK';
+    payload: string | null;
+} | {
+    type: 'UPDATE_ATTRIBUTES';
+    payload: {
+        id: string;
+        attributes: Record<string, string>;
+    };
+} | {
+    type: 'UPDATE_CONTENT';
+    payload: {
+        id: string;
+        content: string;
+    };
+} | {
+    type: 'ADD_BLOCK';
+    payload: {
+        parentId: string;
+        index: number;
+        block: MjmlNode;
+    };
+} | {
+    type: 'DELETE_BLOCK';
+    payload: string;
+} | {
+    type: 'MOVE_BLOCK';
+    payload: {
+        id: string;
+        newParentId: string;
+        newIndex: number;
+    };
+} | {
+    type: 'SET_DOCUMENT';
+    payload: MjmlNode;
+} | {
+    type: 'UNDO';
+} | {
+    type: 'REDO';
+} | {
+    type: 'UPDATE_MJML_ATTRIBUTE';
+    payload: {
+        attributeType: 'all' | 'element' | 'class';
+        target: string | null;
+        attributes: Record<string, string>;
+    };
+} | {
+    type: 'ADD_CLASS';
+    payload: string;
+} | {
+    type: 'REMOVE_CLASS';
+    payload: string;
+} | {
+    type: 'RENAME_CLASS';
+    payload: {
+        oldName: string;
+        newName: string;
+    };
+} | {
+    type: 'ADD_FONT';
+    payload: MjmlFont;
+} | {
+    type: 'REMOVE_FONT';
+    payload: string;
+} | {
+    type: 'UPDATE_FONT';
+    payload: MjmlFont;
+};
+
+export declare interface EditorState {
+    document: MjmlNode;
+    selectedBlockId: string | null;
+    history: MjmlNode[];
+    historyIndex: number;
+}
+
+/**
+ * Complete Liquid schema passed to MjmlEditor
+ */
+export declare interface LiquidSchema {
+    /** Variables accessible via {{ variable_name }} syntax */
+    variables: LiquidSchemaItem[];
+    /** Tags accessible via {% tag_name %} syntax */
+    tags: LiquidSchemaItem[];
+}
+
+/**
+ * Schema item for Liquid variables and tags
+ */
+export declare interface LiquidSchemaItem {
+    /** The name/path of the variable or tag (e.g., "user.name" or "if") */
+    name: string;
+    /** Optional description shown in the autocomplete popup */
+    description?: string;
+}
+
+export declare function MjmlEditor({ value, onChange, className, defaultTheme, liquidSchema, }: MjmlEditorProps): JSX.Element;
+
+declare interface MjmlEditorProps {
+    value: string;
+    onChange: (mjml: string) => void;
+    className?: string;
+    defaultTheme?: 'light' | 'dark' | 'system';
+    liquidSchema?: LiquidSchema;
+}
+
+declare interface MjmlFont {
+    name: string;
+    href: string;
+}
+
+export declare interface MjmlNode {
+    tagName: string;
+    attributes: Record<string, string>;
+    children?: MjmlNode[];
+    content?: string;
+    _id?: string;
+}
+
+export declare type MjmlTagName = 'mjml' | 'mj-head' | 'mj-body' | 'mj-wrapper' | 'mj-section' | 'mj-column' | 'mj-text' | 'mj-image' | 'mj-button' | 'mj-divider' | 'mj-spacer' | 'mj-title' | 'mj-preview' | 'mj-attributes' | 'mj-all' | 'mj-class' | 'mj-style' | 'mj-font';
+
+declare type ResolvedTheme = 'light' | 'dark';
+
+declare type Theme = 'light' | 'dark' | 'system';
+
+declare interface ThemeContextValue {
+    theme: Theme;
+    resolvedTheme: ResolvedTheme;
+    setTheme: (theme: Theme) => void;
+    toggleTheme: () => void;
+}
+
+export declare function ThemeProvider({ children, defaultTheme, storageKey, }: ThemeProviderProps): JSX.Element;
+
+declare interface ThemeProviderProps {
+    children: ReactNode;
+    defaultTheme?: Theme;
+    storageKey?: string;
+}
+
+export declare function ThemeToggle(): JSX.Element;
+
+export declare function useTheme(): ThemeContextValue;
+
+export { }