@jhits/plugin-newsletter 0.0.4 → 0.0.6

package/dist/views/CanvasEditor/EditorBody.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Editor Body Component
+ * Simplified Notion-style editor with single paragraph by default
+ */
+import { Block } from '../../types/block';
+import type { useSlashCommand } from './hooks/useSlashCommand';
+export interface EditorBodyProps {
+    blocks: Block[];
+    onBlockAdd: (type: string, index: number, containerId?: string) => void;
+    onBlockUpdate: (id: string, data: Partial<Block['data']>) => void;
+    onBlockDelete: (id: string) => void;
+    onBlockMove: (id: string, newIndex: number, containerId?: string) => void;
+    /** Enable dark mode for content area and wrappers (default: true) */
+    darkMode?: boolean;
+    /** Background colors for the editor */
+    backgroundColors?: {
+        light: string;
+        dark?: string;
+    };
+    /** Slash command handler */
+    slashCommand?: ReturnType<typeof useSlashCommand>;
+}
+export declare function EditorBody({ blocks, onBlockAdd, onBlockUpdate, onBlockDelete, onBlockMove, darkMode, backgroundColors, slashCommand, }: EditorBodyProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EditorBody.d.ts.map

package/dist/views/CanvasEditor/EditorBody.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorBody.d.ts","sourceRoot":"","sources":["../../../src/views/CanvasEditor/EditorBody.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAE/D,MAAM,WAAW,eAAe;IAC5B,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACxE,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,KAAK,IAAI,CAAC;IAClE,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1E,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,gBAAgB,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,4BAA4B;IAC5B,YAAY,CAAC,EAAE,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;CACrD;AAED,wBAAgB,UAAU,CAAC,EACvB,MAAM,EACN,UAAU,EACV,aAAa,EACb,aAAa,EACb,WAAW,EACX,QAAe,EACf,gBAAgB,EAChB,YAAY,GACf,EAAE,eAAe,2CAuDjB"}

package/dist/views/CanvasEditor/EditorBody.js

@@ -0,0 +1,21 @@
+/**
+ * Editor Body Component
+ * Simplified Notion-style editor with single paragraph by default
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Plus } from 'lucide-react';
+import { BlockWrapper } from './BlockWrapper';
+export function EditorBody({ blocks, onBlockAdd, onBlockUpdate, onBlockDelete, onBlockMove, darkMode = true, backgroundColors, slashCommand, }) {
+    const handleDelete = (blockId, index) => {
+        onBlockDelete(blockId);
+        // If deleting the last block, ensure we still have at least one paragraph
+        if (blocks.length === 1) {
+            setTimeout(() => {
+                onBlockAdd('paragraph', 0);
+            }, 0);
+        }
+    };
+    return (_jsxs("div", { className: "relative", children: [blocks.map((block, index) => (_jsxs(React.Fragment, { children: [_jsx("div", { className: "relative h-2 group/add-button", children: _jsx("button", { onClick: () => onBlockAdd('paragraph', index), className: "absolute left-0 top-1/2 -translate-y-1/2 w-6 h-6 flex items-center justify-center opacity-0 group-hover/add-button:opacity-100 transition-opacity hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded", title: "Add block", children: _jsx(Plus, { size: 14, className: "text-neutral-400 dark:text-neutral-500" }) }) }), _jsx("div", { className: "relative", children: _jsx(BlockWrapper, { block: block, onUpdate: (data) => onBlockUpdate(block.id, data), onDelete: () => handleDelete(block.id, index), onMoveUp: index > 0 ? () => onBlockMove(block.id, index - 1) : undefined, onMoveDown: index < blocks.length - 1 ? () => onBlockMove(block.id, index + 1) : undefined, allBlocks: blocks, slashCommand: slashCommand, blockIndex: index, onAddBlockBelow: (blockType) => onBlockAdd(blockType, index + 1) }) })] }, block.id))), _jsx("div", { className: "relative h-8 group/add-button-bottom mt-2", children: _jsx("button", { onClick: () => onBlockAdd('paragraph', blocks.length), className: "absolute left-0 top-1/2 -translate-y-1/2 w-6 h-6 flex items-center justify-center opacity-0 group-hover/add-button-bottom:opacity-100 transition-opacity hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded", title: "Add block", children: _jsx(Plus, { size: 14, className: "text-neutral-400 dark:text-neutral-500" }) }) })] }));
+}

package/dist/views/CanvasEditor/EditorHeader.d.ts

@@ -0,0 +1,12 @@
+export interface EditorHeaderProps {
+    isPreviewMode: boolean;
+    onPreviewToggle: () => void;
+    isSidebarOpen: boolean;
+    onSidebarToggle: () => void;
+    isSaving: boolean;
+    onSave: () => Promise<void>;
+    onSaveError: (error: string | null) => void;
+    isDirty?: boolean;
+}
+export declare function EditorHeader({ isPreviewMode, onPreviewToggle, isSidebarOpen, onSidebarToggle, isSaving, onSave, onSaveError, isDirty, }: EditorHeaderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EditorHeader.d.ts.map

package/dist/views/CanvasEditor/EditorHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorHeader.d.ts","sourceRoot":"","sources":["../../../src/views/CanvasEditor/EditorHeader.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,iBAAiB;IAC9B,aAAa,EAAE,OAAO,CAAC;IACvB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,aAAa,EAAE,OAAO,CAAC;IACvB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,YAAY,CAAC,EACzB,aAAa,EACb,eAAe,EACf,aAAa,EACb,eAAe,EACf,QAAQ,EACR,MAAM,EACN,WAAW,EACX,OAAe,GAClB,EAAE,iBAAiB,2CAgHnB"}

package/dist/views/CanvasEditor/EditorHeader.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ArrowLeft, Settings2, Save, Edit, Eye } from 'lucide-react';
+import { useEditor } from '../../state/EditorContext';
+export function EditorHeader({ isPreviewMode, onPreviewToggle, isSidebarOpen, onSidebarToggle, isSaving, onSave, onSaveError, isDirty = false, }) {
+    const { state } = useEditor();
+    const [saveError, setSaveError] = useState(null);
+    const handleSave = async () => {
+        try {
+            setSaveError(null);
+            await onSave();
+        }
+        catch (error) {
+            console.error('[EditorHeader] Failed to save newsletter:', error);
+            let errorMessage = error.message || 'Failed to save newsletter';
+            if (errorMessage.includes('Unauthorized')) {
+                errorMessage = 'You are not authorized to save. Please log in again.';
+            }
+            setSaveError(errorMessage);
+            onSaveError(errorMessage);
+        }
+    };
+    return (_jsxs("header", { className: "flex items-center justify-between px-6 py-3 bg-dashboard-sidebar backdrop-blur-md border-b border-dashboard-border flex-none shrink-0", children: [_jsx("div", { className: "flex items-center gap-6", children: _jsx("button", { onClick: () => {
+                        if (isDirty) {
+                            const confirmed = window.confirm('You have unsaved changes. Are you sure you want to leave? Your changes will be lost.');
+                            if (!confirmed) {
+                                return;
+                            }
+                        }
+                        window.location.href = '/dashboard/newsletter';
+                    }, className: "text-neutral-500 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white transition-colors", children: _jsx(ArrowLeft, { size: 20, strokeWidth: 1.5 }) }) }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("div", { className: "flex items-center bg-dashboard-bg border border-dashboard-border rounded-full p-1 gap-1", children: [_jsxs("button", { onClick: () => {
+                                    if (isPreviewMode) {
+                                        onPreviewToggle();
+                                    }
+                                }, className: `flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[10px] uppercase tracking-widest font-bold transition-all ${!isPreviewMode
+                                    ? 'bg-primary text-white shadow-sm'
+                                    : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white'}`, title: "Edit mode", children: [_jsx(Edit, { size: 12, strokeWidth: 2.5 }), _jsx("span", { children: "Edit" })] }), _jsxs("button", { onClick: () => {
+                                    if (!isPreviewMode) {
+                                        onPreviewToggle();
+                                    }
+                                }, className: `flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[10px] uppercase tracking-widest font-bold transition-all ${isPreviewMode
+                                    ? 'bg-primary text-white shadow-sm'
+                                    : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white'}`, title: "Preview mode", children: [_jsx(Eye, { size: 12, strokeWidth: 2.5 }), _jsx("span", { children: "Preview" })] })] }), _jsxs("button", { onClick: onSidebarToggle, className: `flex items-center gap-2 text-[10px] uppercase tracking-widest font-black transition-all ${isSidebarOpen ? 'text-dashboard-text' : 'text-neutral-500 dark:text-neutral-400'}`, children: [_jsx(Settings2, { size: 16, strokeWidth: 1.5 }), "Settings"] }), _jsx("button", { onClick: handleSave, disabled: isSaving || !isDirty, className: `inline-flex items-center gap-2 px-4 py-2 rounded-full text-[10px] font-black uppercase tracking-widest transition-colors shadow-lg ${isSaving || !isDirty
+                            ? 'bg-neutral-400 text-white cursor-not-allowed'
+                            : 'bg-primary text-white hover:bg-primary/90'}`, children: isSaving ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "w-3 h-3 border-2 border-white border-t-transparent rounded-full animate-spin" }), "Saving..."] })) : (_jsxs(_Fragment, { children: [_jsx(Save, { size: 14 }), isDirty ? 'Save Changes' : 'Saved'] })) })] })] }));
+}

package/dist/views/CanvasEditor/components/CustomBlockItem.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface CustomBlockItemProps {
+    blockType: string;
+    name: string;
+    description?: string;
+    icon: React.ReactNode;
+    onAddBlock?: (blockType: string) => void;
+}
+export declare function CustomBlockItem({ blockType, name, description, icon, onAddBlock }: CustomBlockItemProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CustomBlockItem.d.ts.map

package/dist/views/CanvasEditor/components/CustomBlockItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomBlockItem.d.ts","sourceRoot":"","sources":["../../../../src/views/CanvasEditor/components/CustomBlockItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAGhD,MAAM,WAAW,oBAAoB;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED,wBAAgB,eAAe,CAAC,EAC5B,SAAS,EACT,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,UAAU,EACb,EAAE,oBAAoB,2CA+DtB"}

package/dist/views/CanvasEditor/components/CustomBlockItem.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef } from 'react';
+import { GripVertical } from 'lucide-react';
+export function CustomBlockItem({ blockType, name, description, icon, onAddBlock }) {
+    const [hasDragged, setHasDragged] = useState(false);
+    const mouseDownRef = useRef(null);
+    const handleDragStart = (e) => {
+        e.dataTransfer.setData('block-type', blockType);
+        e.dataTransfer.effectAllowed = 'move';
+        setHasDragged(true);
+    };
+    const handleMouseDown = (e) => {
+        mouseDownRef.current = { x: e.clientX, y: e.clientY };
+        setHasDragged(false);
+    };
+    const handleMouseMove = (e) => {
+        if (mouseDownRef.current) {
+            const dx = Math.abs(e.clientX - mouseDownRef.current.x);
+            const dy = Math.abs(e.clientY - mouseDownRef.current.y);
+            if (dx > 5 || dy > 5) {
+                setHasDragged(true);
+            }
+        }
+    };
+    const handleClick = (e) => {
+        if (!hasDragged && onAddBlock) {
+            e.preventDefault();
+            e.stopPropagation();
+            onAddBlock(blockType);
+        }
+        mouseDownRef.current = null;
+        setTimeout(() => setHasDragged(false), 100);
+    };
+    return (_jsxs("div", { draggable: true, onDragStart: handleDragStart, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onClick: handleClick, className: "p-4 rounded-xl border border-dashboard-border bg-dashboard-bg hover:border-primary cursor-pointer transition-all group", title: description, children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "text-neutral-500 dark:text-neutral-400 group-hover:text-primary dark:group-hover:text-primary transition-colors", children: icon }), _jsx("span", { className: "text-[10px] font-bold uppercase tracking-wider text-neutral-700 dark:text-neutral-300 group-hover:text-neutral-950 dark:group-hover:text-white transition-colors", children: name })] }), _jsx(GripVertical, { size: 12, className: "text-neutral-400 dark:text-neutral-500 group-hover:text-neutral-600 dark:group-hover:text-neutral-400" })] }), description && (_jsx("p", { className: "text-[9px] text-neutral-500 dark:text-neutral-400 leading-relaxed line-clamp-2", children: description }))] }));
+}

package/dist/views/CanvasEditor/components/EditorCanvas.d.ts

@@ -0,0 +1,25 @@
+import type { Block } from '../../../types/block';
+import type { NewsletterMetadata } from '../../../types/newsletter';
+import type { useSlashCommand } from '../hooks/useSlashCommand';
+export interface EditorCanvasProps {
+    isPreviewMode: boolean;
+    contentBlocks: Block[];
+    title: string;
+    siteId: string;
+    locale: string;
+    darkMode: boolean;
+    backgroundColors?: {
+        light: string;
+        dark?: string;
+    };
+    metadata?: NewsletterMetadata;
+    onTitleChange: (title: string) => void;
+    onMetadataChange?: (metadata: Partial<NewsletterMetadata>) => void;
+    onBlockAdd: (type: string, index: number, containerId?: string) => void;
+    onBlockUpdate: (id: string, data: Partial<Block['data']>) => void;
+    onBlockDelete: (id: string) => void;
+    onBlockMove: (id: string, newIndex: number, containerId?: string) => void;
+    slashCommand?: ReturnType<typeof useSlashCommand>;
+}
+export declare function EditorCanvas({ isPreviewMode, contentBlocks, title, siteId, locale, darkMode, backgroundColors, metadata, onTitleChange, onMetadataChange, onBlockAdd, onBlockUpdate, onBlockDelete, onBlockMove, slashCommand, }: EditorCanvasProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EditorCanvas.d.ts.map

package/dist/views/CanvasEditor/components/EditorCanvas.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorCanvas.d.ts","sourceRoot":"","sources":["../../../../src/views/CanvasEditor/components/EditorCanvas.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAiMhE,MAAM,WAAW,iBAAiB;IAC9B,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,KAAK,EAAE,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IACnE,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACxE,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,KAAK,IAAI,CAAC;IAClE,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1E,YAAY,CAAC,EAAE,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;CACrD;AAED,wBAAgB,YAAY,CAAC,EACzB,aAAa,EACb,aAAa,EACb,KAAK,EACL,MAAM,EACN,MAAM,EACN,QAAQ,EACR,gBAAgB,EAChB,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,UAAU,EACV,aAAa,EACb,aAAa,EACb,WAAW,EACX,YAAY,GACf,EAAE,iBAAiB,2CAuPnB"}

package/dist/views/CanvasEditor/components/EditorCanvas.js

@@ -0,0 +1,397 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useEffect, useState } from 'react';
+import { EditorBody } from '../EditorBody';
+import { generateNewsletterEmailHtml } from '../../../lib/email/EmailRenderer';
+// Add email-like styling for editor blocks
+const emailEditorStyles = `
+.email-editor-content p,
+.email-editor-content .text-md {
+    font-size: 15px !important;
+    line-height: 1.8 !important;
+    color: #1a2e26 !important;
+    margin: 0 0 15px 0 !important;
+    font-family: 'Georgia', serif !important;
+}
+
+.email-editor-content h1,
+.email-editor-content h2,
+.email-editor-content h3,
+.email-editor-content h4,
+.email-editor-content h5,
+.email-editor-content h6 {
+    font-family: 'Georgia', serif !important;
+    font-weight: bold !important;
+    color: #1a2e26 !important;
+    margin: 20px 0 10px 0 !important;
+    line-height: 1.3 !important;
+}
+
+.email-editor-content h1 {
+    font-size: 32px !important;
+}
+
+.email-editor-content h2 {
+    font-size: 24px !important;
+}
+
+.email-editor-content h3 {
+    font-size: 20px !important;
+}
+
+.email-editor-content h4,
+.email-editor-content h5,
+.email-editor-content h6 {
+    font-size: 18px !important;
+}
+
+.email-editor-content ul,
+.email-editor-content ol {
+    margin: 15px 0 !important;
+    padding-left: 25px !important;
+    color: #1a2e26 !important;
+    font-size: 15px !important;
+    line-height: 1.8 !important;
+}
+
+.email-editor-content li {
+    margin: 8px 0 !important;
+    padding-left: 5px !important;
+    line-height: 1.8 !important;
+    color: #1a2e26 !important;
+}
+
+.email-editor-content img {
+    max-width: 100% !important;
+    height: auto !important;
+    display: block !important;
+    margin: 20px 0 !important;
+}
+
+.email-block-wrapper {
+    font-family: 'Georgia', serif;
+    color: #1a2e26;
+}
+
+/* Ensure all blocks are visible */
+.email-block-content > * {
+    display: block !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+}
+
+/* Heading input styling to match preview */
+.email-block-content input[type="text"] {
+    font-family: 'Georgia', serif !important;
+    color: #1a2e26 !important;
+    background: transparent !important;
+    border: none !important;
+    outline: none !important;
+    width: 100% !important;
+    padding: 0 !important;
+}
+
+.email-block-content input[type="text"]::placeholder {
+    color: #a1a1aa !important;
+}
+
+/* Table block styling */
+.email-block-content table {
+    width: 100% !important;
+    border-collapse: collapse !important;
+    margin: 20px 0 !important;
+    display: table !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+}
+
+.email-block-content table th,
+.email-block-content table td {
+    padding: 12px !important;
+    border: 1px solid #e5e7eb !important;
+    text-align: left !important;
+    color: #1a2e26 !important;
+    font-size: 15px !important;
+    line-height: 1.8 !important;
+    background-color: transparent !important;
+}
+
+.email-block-content table th {
+    background-color: #f9fafb !important;
+    font-weight: bold !important;
+}
+
+/* Table container styling */
+.email-block-content div[class*="overflow-hidden"],
+.email-block-content div[class*="rounded"] {
+    display: block !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+}
+
+/* List block styling */
+.email-block-content ul,
+.email-block-content ol {
+    display: block !important;
+    margin: 15px 0 !important;
+    padding-left: 25px !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+}
+
+.email-block-content li {
+    display: list-item !important;
+    margin: 8px 0 !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+}
+
+/* List container styling */
+.email-block-content div[class*="bg-white"][class*="rounded"] {
+    display: block !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+    background-color: #ffffff !important;
+    border: 1px solid #e5e7eb !important;
+}
+
+/* Recipe block styling */
+.email-block-content div[class*="recipe"],
+.email-block-content div[class*="Recipe"] {
+    display: block !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+}
+
+/* Ensure all container divs are visible */
+.email-block-content > div {
+    display: block !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+}
+
+.email-block-content div[class*="bg-white"],
+.email-block-content div[class*="border"] {
+    display: block !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+}
+
+/* Ensure buttons and inputs are visible */
+.email-block-content button,
+.email-block-content input {
+    visibility: visible !important;
+    opacity: 1 !important;
+}
+
+/* Override any hidden or invisible states */
+.email-block-content [style*="display: none"],
+.email-block-content [style*="visibility: hidden"],
+.email-block-content [style*="opacity: 0"] {
+    display: block !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+}
+`;
+export function EditorCanvas({ isPreviewMode, contentBlocks, title, siteId, locale, darkMode, backgroundColors, metadata, onTitleChange, onMetadataChange, onBlockAdd, onBlockUpdate, onBlockDelete, onBlockMove, slashCommand, }) {
+    const titleRef = useRef(null);
+    // Inject email-like styles for editor
+    useEffect(() => {
+        const styleId = 'email-editor-styles';
+        if (!document.getElementById(styleId)) {
+            const style = document.createElement('style');
+            style.id = styleId;
+            style.textContent = emailEditorStyles;
+            document.head.appendChild(style);
+        }
+    }, []);
+    // Handle Title Auto-resize
+    useEffect(() => {
+        if (titleRef.current) {
+            titleRef.current.style.height = 'auto';
+            titleRef.current.style.height = `${titleRef.current.scrollHeight}px`;
+        }
+    }, [title]);
+    return (_jsx("div", { className: "flex-1 overflow-y-auto overflow-x-hidden pb-40 custom-scrollbar selection:bg-primary/20 dark:selection:bg-primary/30 min-h-0", style: {
+            backgroundColor: backgroundColors
+                ? (darkMode && backgroundColors.dark
+                    ? backgroundColors.dark
+                    : backgroundColors.light)
+                : '#faf9f6',
+        }, children: isPreviewMode ? (_jsx("div", { className: "mx-auto transition-all duration-500 max-w-[800px] px-6 py-6 w-full", children: _jsx(EmailPreview, { title: title, blocks: contentBlocks, siteId: siteId, locale: locale, metadata: metadata }) })) : (_jsx("div", { className: "mx-auto transition-all duration-500 max-w-[800px] px-6 py-6 w-full", children: _jsx("div", { className: "bg-gradient-to-b from-neutral-50 to-neutral-100 dark:from-neutral-900 dark:to-neutral-800 rounded-2xl p-6 border border-neutral-200 dark:border-neutral-700 shadow-xl", children: _jsxs("div", { className: "bg-white dark:bg-neutral-800 rounded-lg shadow-2xl overflow-hidden", children: [_jsxs("div", { className: "bg-white dark:bg-neutral-800 border-b border-neutral-200 dark:border-neutral-700", children: [_jsxs("div", { className: "px-4 py-2 flex items-center justify-between border-b border-neutral-100 dark:border-neutral-700", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { className: "p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded", title: "Close", children: _jsx("svg", { className: "w-4 h-4 text-neutral-600 dark:text-neutral-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), _jsx("button", { className: "p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded", title: "Minimize", children: _jsx("svg", { className: "w-4 h-4 text-neutral-600 dark:text-neutral-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20 12H4" }) }) }), _jsx("button", { className: "p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded", title: "Fullscreen", children: _jsx("svg", { className: "w-4 h-4 text-neutral-600 dark:text-neutral-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" }) }) })] }), _jsx("div", { className: "flex items-center gap-2", children: _jsx("span", { className: "text-xs text-neutral-500 dark:text-neutral-400 font-medium", children: "Compose Email" }) })] }), _jsx("div", { className: "px-4 py-3 border-b border-neutral-100 dark:border-neutral-700", children: _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("label", { className: "text-xs text-neutral-500 dark:text-neutral-400 font-medium w-16 flex-shrink-0", children: "To:" }), _jsx("input", { type: "text", value: "All Subscribers", readOnly: true, className: "flex-1 text-sm bg-transparent border-none outline-none text-neutral-700 dark:text-neutral-300 placeholder:text-neutral-400" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("label", { className: "text-xs text-neutral-500 dark:text-neutral-400 font-medium w-16 flex-shrink-0", children: "Subject:" }), _jsx("input", { type: "text", value: metadata?.subject || '', onChange: (e) => onMetadataChange?.({
+                                                            subject: e.target.value,
+                                                            previewText: metadata?.previewText,
+                                                            lang: metadata?.lang,
+                                                            recipientFilter: metadata?.recipientFilter,
+                                                        }), placeholder: "Enter email subject...", className: "flex-1 text-sm bg-transparent border-none outline-none text-neutral-900 dark:text-neutral-100 placeholder:text-neutral-400 font-medium" })] })] }) })] }), _jsxs("div", { className: "bg-white dark:bg-neutral-800", style: {
+                                backgroundColor: '#ffffff',
+                            }, children: [(() => {
+                                    // Get email config from window global (set by initNewsletterPlugin)
+                                    let emailConfig = {};
+                                    if (typeof window !== 'undefined' && window.__JHITS_PLUGIN_PROPS__) {
+                                        const pluginProps = window.__JHITS_PLUGIN_PROPS__['plugin-newsletter'];
+                                        if (pluginProps?.emailConfig) {
+                                            emailConfig = pluginProps.emailConfig;
+                                        }
+                                    }
+                                    return emailConfig.logoUrl ? (_jsx("div", { style: {
+                                            padding: '40px 0 20px 0',
+                                            textAlign: 'center',
+                                            backgroundColor: '#ffffff',
+                                            display: 'flex',
+                                            justifyContent: 'center',
+                                            alignItems: 'center',
+                                        }, children: _jsx("img", { src: emailConfig.logoUrl, alt: emailConfig.logoAlt || 'Logo', style: {
+                                                width: '180px',
+                                                height: 'auto',
+                                                display: 'block',
+                                                margin: '0 auto',
+                                            } }) })) : null;
+                                })(), _jsxs("div", { className: "email-editor-content", style: {
+                                        fontFamily: "'Georgia', serif",
+                                        color: '#1a2e26',
+                                        lineHeight: '1.8',
+                                        fontSize: '15px',
+                                        padding: '0 50px 40px 50px',
+                                        minHeight: '400px',
+                                        backgroundColor: '#ffffff',
+                                    }, children: [_jsx(EditorBody, { blocks: contentBlocks, darkMode: darkMode, backgroundColors: backgroundColors, onBlockAdd: onBlockAdd, onBlockUpdate: onBlockUpdate, onBlockDelete: onBlockDelete, onBlockMove: onBlockMove, slashCommand: slashCommand }), (() => {
+                                            // Generate unsubscribe URL (similar to welcome email)
+                                            const baseUrl = typeof window !== 'undefined' ? window.location.origin : '';
+                                            const slugs = {
+                                                sv: '/avmälla',
+                                                nl: '/afmelden',
+                                                en: '/unsubscribe',
+                                            };
+                                            const slug = slugs[locale] || slugs.en;
+                                            const unsubscribeUrl = `${baseUrl}${slug}?email=subscriber@example.com`;
+                                            // Get unsubscribe text based on locale
+                                            const isDutch = locale === 'nl';
+                                            const unsubscribeText = isDutch ? 'Afmelden' : 'Unsubscribe';
+                                            return (_jsxs(_Fragment, { children: [_jsx("div", { style: {
+                                                            height: '1px',
+                                                            width: '40px',
+                                                            backgroundColor: '#1a2e2620',
+                                                            margin: '30px auto',
+                                                        } }), _jsx("p", { style: {
+                                                            textAlign: 'center',
+                                                            fontSize: '12px',
+                                                            color: '#a1a1aa',
+                                                            margin: 0,
+                                                        }, children: _jsx("a", { href: unsubscribeUrl, style: {
+                                                                color: '#a1a1aa',
+                                                                textDecoration: 'none',
+                                                            }, onClick: (e) => e.preventDefault(), children: unsubscribeText }) })] }));
+                                        })()] }), (() => {
+                                    // Get email config from window global
+                                    let emailConfig = {};
+                                    if (typeof window !== 'undefined' && window.__JHITS_PLUGIN_PROPS__) {
+                                        const pluginProps = window.__JHITS_PLUGIN_PROPS__['plugin-newsletter'];
+                                        if (pluginProps?.emailConfig) {
+                                            emailConfig = pluginProps.emailConfig;
+                                        }
+                                    }
+                                    return emailConfig.footerText ? (_jsx("div", { style: {
+                                            padding: '40px 50px',
+                                            textAlign: 'center',
+                                            fontFamily: 'sans-serif',
+                                            fontSize: '10px',
+                                            color: '#a1a1aa',
+                                            letterSpacing: '1px',
+                                            borderTop: '1px solid #faf9f6',
+                                            backgroundColor: '#ffffff',
+                                        }, children: emailConfig.footerText })) : null;
+                                })()] })] }) }) })) }));
+}
+/**
+ * Email Preview Component
+ * Shows how the newsletter will look in email clients
+ * Matches the editor view structure for consistency
+ */
+function EmailPreview({ title, blocks, siteId, locale, metadata }) {
+    const [emailHtml, setEmailHtml] = useState('');
+    const iframeRef = useRef(null);
+    useEffect(() => {
+        // Get email config from window global (set by initNewsletterPlugin)
+        let emailConfig = {};
+        if (typeof window !== 'undefined' && window.__JHITS_PLUGIN_PROPS__) {
+            const pluginProps = window.__JHITS_PLUGIN_PROPS__['plugin-newsletter'];
+            if (pluginProps?.emailConfig) {
+                emailConfig = pluginProps.emailConfig;
+            }
+        }
+        // Resolve image IDs to filenames before generating HTML
+        const resolveImageBlocks = async () => {
+            const resolvedBlocks = await Promise.all(blocks.map(async (block) => {
+                if (block.type === 'image' && block.data.imageId) {
+                    const imageId = block.data.imageId;
+                    // Check if already a filename
+                    const hasFileExtension = /\.(jpg|jpeg|png|webp|gif|svg)$/i.test(imageId);
+                    const looksLikeTimestamp = /^\d+-/.test(imageId);
+                    if (hasFileExtension || looksLikeTimestamp) {
+                        // Already a filename, use it directly
+                        return block;
+                    }
+                    // Need to resolve semantic ID to filename
+                    try {
+                        const response = await fetch(`/api/plugin-images/resolve?id=${encodeURIComponent(imageId)}`);
+                        if (response.ok) {
+                            const data = await response.json();
+                            return {
+                                ...block,
+                                data: {
+                                    ...block.data,
+                                    imageId: data.filename || imageId, // Use resolved filename
+                                },
+                            };
+                        }
+                    }
+                    catch (error) {
+                        console.warn(`Failed to resolve image ID ${imageId}:`, error);
+                    }
+                }
+                return block;
+            }));
+            // Generate unsubscribe URL (similar to welcome email)
+            const baseUrl = typeof window !== 'undefined' ? window.location.origin : '';
+            const slugs = {
+                sv: '/avmälla',
+                nl: '/afmelden',
+                en: '/unsubscribe',
+            };
+            const slug = slugs[locale] || slugs.en;
+            // Use placeholder email for preview
+            const unsubscribeUrl = `${baseUrl}${slug}?email=subscriber@example.com`;
+            // Generate email HTML with resolved image blocks
+            const html = generateNewsletterEmailHtml(resolvedBlocks, { subject: metadata?.subject || '', previewText: metadata?.previewText || '' }, {
+                siteId,
+                locale,
+                baseUrl,
+                logoUrl: emailConfig.logoUrl,
+                logoAlt: emailConfig.logoAlt,
+                footerText: emailConfig.footerText,
+                unsubscribeUrl,
+            });
+            setEmailHtml(html);
+            // Update iframe content
+            if (iframeRef.current) {
+                const iframe = iframeRef.current;
+                const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
+                if (iframeDoc) {
+                    iframeDoc.open();
+                    iframeDoc.write(html);
+                    iframeDoc.close();
+                }
+            }
+        };
+        resolveImageBlocks();
+    }, [title, blocks, siteId, locale, metadata]);
+    if (blocks.length === 0) {
+        return (_jsx("div", { className: "bg-gradient-to-b from-neutral-50 to-neutral-100 dark:from-neutral-900 dark:to-neutral-800 rounded-2xl p-6 border border-neutral-200 dark:border-neutral-700 shadow-xl", children: _jsx("div", { className: "bg-white dark:bg-neutral-800 rounded-lg shadow-2xl overflow-hidden", children: _jsxs("div", { className: "text-center py-20 text-neutral-400 dark:text-neutral-500", children: [_jsx("p", { className: "text-sm", children: "No content blocks yet. Switch to Edit mode to add blocks." }), _jsx("p", { className: "text-xs mt-2 text-neutral-500 dark:text-neutral-600", children: "Email preview will appear here once you add blocks." })] }) }) }));
+    }
+    return (_jsx("div", { children: _jsx("div", { className: "bg-gradient-to-b from-neutral-50 to-neutral-100 dark:from-neutral-900 dark:to-neutral-800 rounded-2xl p-6 border border-neutral-200 dark:border-neutral-700 shadow-xl", children: _jsxs("div", { className: "bg-white dark:bg-neutral-800 rounded-lg shadow-2xl overflow-hidden", children: [_jsxs("div", { className: "bg-white dark:bg-neutral-800 border-b border-neutral-200 dark:border-neutral-700", children: [_jsxs("div", { className: "px-4 py-2 flex items-center justify-between border-b border-neutral-100 dark:border-neutral-700", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { className: "p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded", title: "Close", children: _jsx("svg", { className: "w-4 h-4 text-neutral-600 dark:text-neutral-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), _jsx("button", { className: "p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded", title: "Minimize", children: _jsx("svg", { className: "w-4 h-4 text-neutral-600 dark:text-neutral-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20 12H4" }) }) }), _jsx("button", { className: "p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded", title: "Fullscreen", children: _jsx("svg", { className: "w-4 h-4 text-neutral-600 dark:text-neutral-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" }) }) })] }), _jsx("div", { className: "flex items-center gap-2", children: _jsx("span", { className: "text-xs text-neutral-500 dark:text-neutral-400 font-medium", children: "Email Preview" }) })] }), _jsx("div", { className: "px-4 py-3 border-b border-neutral-100 dark:border-neutral-700", children: _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("label", { className: "text-xs text-neutral-500 dark:text-neutral-400 font-medium w-16 flex-shrink-0", children: "To:" }), _jsx("input", { type: "text", value: "All Subscribers", readOnly: true, className: "flex-1 text-sm bg-transparent border-none outline-none text-neutral-700 dark:text-neutral-300 placeholder:text-neutral-400" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("label", { className: "text-xs text-neutral-500 dark:text-neutral-400 font-medium w-16 flex-shrink-0", children: "Subject:" }), _jsx("input", { type: "text", value: metadata?.subject || 'Newsletter Subject', readOnly: true, className: "flex-1 text-sm bg-transparent border-none outline-none text-neutral-900 dark:text-neutral-100 placeholder:text-neutral-400 font-medium" })] })] }) })] }), _jsx("div", { className: "bg-white dark:bg-neutral-800", children: _jsx("iframe", { ref: iframeRef, title: "Email Preview", className: "w-full border-0 bg-white", style: {
+                                minHeight: '500px',
+                                maxHeight: '900px',
+                                display: 'block',
+                            }, sandbox: "allow-same-origin" }) })] }) }) }));
+}

package/dist/views/CanvasEditor/components/EditorLibrary.d.ts

@@ -0,0 +1,7 @@
+import type { BlockTypeDefinition } from '../../../types/block';
+export interface EditorLibraryProps {
+    registeredBlocks: BlockTypeDefinition[];
+    onAddBlock: (type: string) => void;
+}
+export declare function EditorLibrary({ registeredBlocks, onAddBlock }: EditorLibraryProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EditorLibrary.d.ts.map

package/dist/views/CanvasEditor/components/EditorLibrary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorLibrary.d.ts","sourceRoot":"","sources":["../../../../src/views/CanvasEditor/components/EditorLibrary.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAEhE,MAAM,WAAW,kBAAkB;IAC/B,gBAAgB,EAAE,mBAAmB,EAAE,CAAC;IACxC,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,wBAAgB,aAAa,CAAC,EAAE,gBAAgB,EAAE,UAAU,EAAE,EAAE,kBAAkB,2CA2GjF"}