@jhits/plugin-newsletter 0.0.4 → 0.0.6

package/dist/registry/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/registry/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/registry/index.js

@@ -0,0 +1,4 @@
+/**
+ * Registry Exports
+ */
+export { blockRegistry } from './BlockRegistry';

package/dist/state/EditorContext.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Newsletter Editor Context
+ * React Context for managing newsletter editor state
+ * Multi-Tenant: Accepts custom blocks from client applications
+ */
+import React from 'react';
+import { EditorState, EditorContextValue } from './types';
+import { ClientBlockDefinition } from '../types/block';
+/**
+ * Editor Provider Props
+ */
+export interface EditorProviderProps {
+    children: React.ReactNode;
+    /** Initial state (optional) */
+    initialState?: Partial<EditorState>;
+    /** Callback when save is triggered */
+    onSave?: (state: EditorState) => Promise<void>;
+    /**
+     * Custom blocks from client application
+     * These blocks will be registered in the BlockRegistry on mount
+     */
+    customBlocks?: ClientBlockDefinition[];
+    /** Enable dark mode for content area and wrappers (default: true) */
+    darkMode?: boolean;
+    /** Background colors for the editor */
+    backgroundColors?: {
+        /** Background color for light mode (REQUIRED) */
+        light: string;
+        /** Background color for dark mode (optional) */
+        dark?: string;
+    };
+}
+/**
+ * Editor Provider
+ * Provides editor state and actions to child components
+ * Automatically registers client-provided blocks on mount
+ */
+export declare function EditorProvider({ children, initialState, onSave, customBlocks, darkMode, backgroundColors }: EditorProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access editor context
+ * @throws Error if used outside EditorProvider
+ */
+export declare function useEditor(): EditorContextValue;
+//# sourceMappingURL=EditorContext.d.ts.map

package/dist/state/EditorContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorContext.d.ts","sourceRoot":"","sources":["../../src/state/EditorContext.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,KAAmG,MAAM,OAAO,CAAC;AAExH,OAAO,EAAE,WAAW,EAAoC,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAG5F,OAAO,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAMvD;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,+BAA+B;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IACpC,sCAAsC;IACtC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/C;;;OAGG;IACH,YAAY,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACvC,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,gBAAgB,CAAC,EAAE;QACf,iDAAiD;QACjD,KAAK,EAAE,MAAM,CAAC;QACd,gDAAgD;QAChD,IAAI,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;CACL;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC3B,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,YAAiB,EACjB,QAAe,EACf,gBAAgB,EACnB,EAAE,mBAAmB,2CAkNrB;AAED;;;GAGG;AACH,wBAAgB,SAAS,IAAI,kBAAkB,CAM9C"}

package/dist/state/EditorContext.js

@@ -0,0 +1,212 @@
+/**
+ * Newsletter Editor Context
+ * React Context for managing newsletter editor state
+ * Multi-Tenant: Accepts custom blocks from client applications
+ */
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useReducer, useCallback, useMemo, useEffect, useRef, useState } from 'react';
+import { editorReducer } from './reducer';
+import { initialEditorState } from './types';
+import { BlockRegistry } from '../registry/BlockRegistry';
+// Create the context
+const EditorContext = createContext(null);
+/**
+ * Editor Provider
+ * Provides editor state and actions to child components
+ * Automatically registers client-provided blocks on mount
+ */
+export function EditorProvider({ children, initialState, onSave, customBlocks = [], darkMode = true, backgroundColors }) {
+    // Register client blocks on mount
+    useEffect(() => {
+        if (customBlocks && customBlocks.length > 0) {
+            try {
+                customBlocks.forEach(block => BlockRegistry.register(block));
+            }
+            catch (error) {
+                console.error('[NewsletterEditorContext] Failed to register custom blocks:', error);
+            }
+        }
+    }, [customBlocks]);
+    const [state, dispatch] = useReducer(editorReducer, { ...initialEditorState, ...initialState });
+    // Use a ref to always have access to the latest state in callbacks
+    const stateRef = useRef(state);
+    stateRef.current = state;
+    // History state for undo/redo
+    const [history, setHistory] = useState([]);
+    const [historyIndex, setHistoryIndex] = useState(-1);
+    const isRestoringRef = useRef(false);
+    const MAX_HISTORY = 50; // Limit history to prevent memory issues
+    // Save current state to history after state changes (but not during undo/redo)
+    // Debounce history updates to avoid excessive re-renders
+    const historyTimeoutRef = useRef(null);
+    useEffect(() => {
+        if (isRestoringRef.current) {
+            isRestoringRef.current = false;
+            return;
+        }
+        // Clear existing timeout
+        if (historyTimeoutRef.current) {
+            clearTimeout(historyTimeoutRef.current);
+        }
+        // Debounce history updates to reduce re-renders
+        historyTimeoutRef.current = setTimeout(() => {
+            // Save current state to history
+            setHistory(prev => {
+                const newHistory = [...prev];
+                // Remove any future history if we're not at the end
+                if (historyIndex < newHistory.length - 1) {
+                    newHistory.splice(historyIndex + 1);
+                }
+                // Add current state
+                newHistory.push({ ...state });
+                // Limit history size
+                if (newHistory.length > MAX_HISTORY) {
+                    newHistory.shift();
+                    return newHistory;
+                }
+                return newHistory;
+            });
+            setHistoryIndex(prev => {
+                const newIndex = prev + 1;
+                return newIndex >= MAX_HISTORY ? MAX_HISTORY - 1 : newIndex;
+            });
+        }, 300); // Debounce by 300ms
+        return () => {
+            if (historyTimeoutRef.current) {
+                clearTimeout(historyTimeoutRef.current);
+            }
+        };
+    }, [state.blocks, state.title, state.slug, state.metadata, state.status, historyIndex]);
+    // Helper: Add a new block (supports nested containers)
+    const addBlock = useCallback((type, index, containerId) => {
+        const blockDefinition = BlockRegistry.get(type);
+        if (!blockDefinition) {
+            console.warn(`Block type "${type}" not found in registry. Available types:`, BlockRegistry.getAll().map((b) => b.type).join(', '));
+            return;
+        }
+        const newBlock = {
+            id: `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+            type,
+            data: { ...blockDefinition.defaultData },
+        };
+        dispatch({ type: 'ADD_BLOCK', payload: { block: newBlock, index, containerId } });
+    }, []);
+    // Helper: Update a block
+    const updateBlock = useCallback((id, data) => {
+        dispatch({ type: 'UPDATE_BLOCK', payload: { id, data } });
+    }, []);
+    // Helper: Delete a block
+    const deleteBlock = useCallback((id) => {
+        dispatch({ type: 'DELETE_BLOCK', payload: { id } });
+    }, []);
+    // Helper: Duplicate a block
+    const duplicateBlock = useCallback((id) => {
+        dispatch({ type: 'DUPLICATE_BLOCK', payload: { id } });
+    }, []);
+    // Helper: Move a block (supports nested containers)
+    const moveBlock = useCallback((id, newIndex, containerId) => {
+        dispatch({ type: 'MOVE_BLOCK', payload: { id, newIndex, containerId } });
+    }, []);
+    // Helper: Load a newsletter
+    const loadNewsletter = useCallback((newsletter) => {
+        dispatch({ type: 'LOAD_NEWSLETTER', payload: newsletter });
+    }, []);
+    // Helper: Reset editor
+    const resetEditor = useCallback(() => {
+        dispatch({ type: 'RESET_EDITOR' });
+    }, []);
+    // Helper: Save
+    // Uses stateRef to always get the latest state, avoiding stale closure issues
+    const save = useCallback(async () => {
+        if (onSave) {
+            // Use stateRef.current to get the absolute latest state
+            // This ensures we don't have stale closure issues with React state updates
+            await onSave(stateRef.current);
+            dispatch({ type: 'MARK_CLEAN' });
+        }
+    }, [onSave]);
+    // Helper: Undo
+    const undo = useCallback(() => {
+        if (historyIndex > 0 && history.length > 0) {
+            const previousState = history[historyIndex - 1];
+            if (previousState) {
+                isRestoringRef.current = true;
+                setHistoryIndex(prev => prev - 1);
+                dispatch({
+                    type: 'LOAD_NEWSLETTER', payload: {
+                        id: previousState.newsletterId || '',
+                        title: previousState.title,
+                        slug: previousState.slug,
+                        blocks: previousState.blocks,
+                        publication: {
+                            status: previousState.status,
+                            authorId: undefined,
+                        },
+                        metadata: previousState.metadata,
+                        createdAt: new Date().toISOString(),
+                        updatedAt: new Date().toISOString(),
+                    }
+                });
+            }
+        }
+    }, [history, historyIndex, dispatch]);
+    // Helper: Redo
+    const redo = useCallback(() => {
+        if (historyIndex < history.length - 1) {
+            const nextState = history[historyIndex + 1];
+            if (nextState) {
+                isRestoringRef.current = true;
+                setHistoryIndex(prev => prev + 1);
+                dispatch({
+                    type: 'LOAD_NEWSLETTER', payload: {
+                        id: nextState.newsletterId || '',
+                        title: nextState.title,
+                        slug: nextState.slug,
+                        blocks: nextState.blocks,
+                        publication: {
+                            status: nextState.status,
+                            authorId: undefined,
+                        },
+                        metadata: nextState.metadata,
+                        createdAt: new Date().toISOString(),
+                        updatedAt: new Date().toISOString(),
+                    }
+                });
+            }
+        }
+    }, [history, historyIndex, dispatch]);
+    // Memoize the context value
+    const value = useMemo(() => ({
+        state,
+        dispatch,
+        darkMode,
+        backgroundColors,
+        helpers: {
+            addBlock,
+            updateBlock,
+            deleteBlock,
+            duplicateBlock,
+            moveBlock,
+            loadNewsletter,
+            resetEditor,
+            save,
+            undo,
+            redo,
+        },
+        canUndo: historyIndex > 0 && history.length > 0,
+        canRedo: historyIndex < history.length - 1,
+    }), [state, dispatch, darkMode, backgroundColors, addBlock, updateBlock, deleteBlock, duplicateBlock, moveBlock, loadNewsletter, resetEditor, save, undo, redo, historyIndex, history.length]);
+    return _jsx(EditorContext.Provider, { value: value, children: children });
+}
+/**
+ * Hook to access editor context
+ * @throws Error if used outside EditorProvider
+ */
+export function useEditor() {
+    const context = useContext(EditorContext);
+    if (!context) {
+        throw new Error('useEditor must be used within an EditorProvider');
+    }
+    return context;
+}

package/dist/state/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * State Exports
+ */
+export { EditorProvider, useEditor } from './EditorContext';
+export type { EditorProviderProps } from './EditorContext';
+export type { EditorContextValue } from './types';
+export { editorReducer } from './reducer';
+export type { EditorState, EditorAction } from './types';
+export { initialEditorState } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/state/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/state/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5D,YAAY,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1C,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC"}

package/dist/state/index.js

@@ -0,0 +1,6 @@
+/**
+ * State Exports
+ */
+export { EditorProvider, useEditor } from './EditorContext';
+export { editorReducer } from './reducer';
+export { initialEditorState } from './types';

package/dist/state/reducer.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Newsletter Editor Reducer
+ * Pure function that handles state transitions
+ */
+import { EditorState, EditorAction } from './types';
+/**
+ * Editor Reducer
+ * Handles all state transitions for the editor
+ */
+export declare function editorReducer(state: EditorState, action: EditorAction): EditorState;
+//# sourceMappingURL=reducer.d.ts.map

package/dist/state/reducer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reducer.d.ts","sourceRoot":"","sources":["../../src/state/reducer.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,WAAW,EAAE,YAAY,EAAsB,MAAM,SAAS,CAAC;AAgQxE;;;GAGG;AACH,wBAAgB,aAAa,CACzB,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,YAAY,GACrB,WAAW,CAoSb"}