Skip to content

Commit be3c386

Browse files
rajat1saxenarajat1saxena
committed
Exported rendering HTML function from the email-editor package;
1 parent 95308d6 commit be3c386

5 files changed

Lines changed: 17 additions & 150 deletions

File tree

‎packages/email-editor/src/components/block-settings-panel.tsx‎

Lines changed: 1 addition & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,7 @@
1-
"use client";
2-
31
import { useEmailEditor } from "@/context/email-editor-context";
4-
import { X, ChevronRight, Code, Copy, Check } from "lucide-react";
2+
import { X, ChevronRight } from "lucide-react";
53
import { Button } from "@/components/ui/button";
64
import { EmailSettings } from "./email-settings";
7-
import { renderEmailToHtml } from "@/lib/email-renderer";
8-
import { useState } from "react";
9-
import {
10-
Dialog,
11-
DialogContent,
12-
DialogHeader,
13-
DialogTitle,
14-
DialogFooter,
15-
} from "@/components/ui/dialog";
165
import { useBlockRegistry } from "@/context/block-registry-context";
176

187
interface BlockSettingsPanelProps {
@@ -22,27 +11,8 @@ interface BlockSettingsPanelProps {
2211
export function BlockSettingsPanel({ blockId }: BlockSettingsPanelProps) {
2312
const { email, setSelectedBlockId } = useEmailEditor();
2413

25-
const [isHtmlDialogOpen, setIsHtmlDialogOpen] = useState(false);
26-
const [exportedHtml, setExportedHtml] = useState("");
27-
const [isCopied, setIsCopied] = useState(false);
2814
const blockRegistry = useBlockRegistry();
2915

30-
// const handleSave = () => {
31-
// alert("Email saved! Check console for data.");
32-
// };
33-
34-
const handleExportHtml = async () => {
35-
const html = await renderEmailToHtml(email);
36-
setExportedHtml(html);
37-
setIsHtmlDialogOpen(true);
38-
};
39-
40-
const handleCopyHtml = () => {
41-
navigator.clipboard.writeText(exportedHtml);
42-
setIsCopied(true);
43-
setTimeout(() => setIsCopied(false), 2000);
44-
};
45-
4616
if (!blockId) {
4717
return (
4818
<div className="flex flex-col h-full">
@@ -58,60 +28,6 @@ export function BlockSettingsPanel({ blockId }: BlockSettingsPanelProps) {
5828
</div>
5929
<div className="flex-1 overflow-y-auto p-4">
6030
<EmailSettings />
61-
62-
<div className="mt-6 space-y-2 pt-4">
63-
{/* <Button className="w-full" onClick={handleSave}>
64-
<Save className="h-4 w-4 mr-2" />
65-
Save Template
66-
</Button> */}
67-
<Button
68-
variant="outline"
69-
className="w-full"
70-
onClick={handleExportHtml}
71-
>
72-
<Code className="h-4 w-4 mr-2" />
73-
Export HTML
74-
</Button>
75-
</div>
76-
77-
<Dialog
78-
open={isHtmlDialogOpen}
79-
onOpenChange={setIsHtmlDialogOpen}
80-
>
81-
<DialogContent className="max-w-3xl max-h-[80vh] flex flex-col">
82-
<DialogHeader>
83-
<DialogTitle>Exported HTML</DialogTitle>
84-
</DialogHeader>
85-
<div className="flex-1 overflow-y-auto my-4">
86-
<textarea
87-
value={exportedHtml}
88-
readOnly
89-
className="w-full h-[400px] p-3 border rounded-md font-mono text-xs resize-none bg-gray-50"
90-
/>
91-
</div>
92-
<DialogFooter>
93-
<Button
94-
variant="outline"
95-
onClick={() => setIsHtmlDialogOpen(false)}
96-
>
97-
Close
98-
</Button>
99-
<Button onClick={handleCopyHtml}>
100-
{isCopied ? (
101-
<>
102-
<Check className="h-4 w-4 mr-2" />
103-
Copied!
104-
</>
105-
) : (
106-
<>
107-
<Copy className="h-4 w-4 mr-2" />
108-
Copy HTML
109-
</>
110-
)}
111-
</Button>
112-
</DialogFooter>
113-
</DialogContent>
114-
</Dialog>
11531
</div>
11632
</div>
11733
);

‎packages/email-editor/src/components/layout/editor-layout.tsx‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,20 +12,14 @@ export function EditorLayout({
1212
showSettings = true,
1313
}: EditorLayoutProps) {
1414
return (
15-
<div className="h-screen bg-gray-100 flex overflow-hidden">
16-
{/* Left Pane - Editor */}
17-
<div className="flex-1 flex flex-col overflow-hidden h-full">
18-
<div className="flex-1 rounded-xl border bg-white shadow-sm m-4 flex flex-col overflow-hidden">
19-
<div className="flex-1 overflow-y-auto">{editor}</div>
20-
</div>
15+
<div className="h-full w-full bg-gray-100 flex gap-4 p-4">
16+
<div className="flex-1 rounded-xl border bg-white shadow-sm overflow-y-auto">
17+
{editor}
2118
</div>
2219

23-
{/* Right Pane - Settings */}
2420
{showSettings && settings && (
25-
<div className="w-80 flex flex-col overflow-hidden">
26-
<div className="flex-1 rounded-xl border bg-white shadow-sm m-4 mr-4 flex flex-col overflow-hidden">
27-
{settings}
28-
</div>
21+
<div className="w-80 rounded-xl border bg-white shadow-sm overflow-y-auto">
22+
{settings}
2923
</div>
3024
)}
3125
</div>

‎packages/email-editor/src/index.css‎

Lines changed: 0 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -58,52 +58,3 @@
5858
--chart-5: 340 75% 55%;
5959
}
6060
}
61-
62-
@layer base {
63-
* {
64-
@apply border-border;
65-
}
66-
body {
67-
@apply bg-background text-foreground;
68-
}
69-
70-
html,
71-
body,
72-
body > div:first-child,
73-
div#__next,
74-
div#__next > div {
75-
@apply h-full;
76-
}
77-
78-
body {
79-
@apply overflow-hidden;
80-
}
81-
}
82-
83-
/* Custom animations for block movement */
84-
@keyframes blockMove {
85-
0% {
86-
transform: translateY(0) scale(1);
87-
}
88-
50% {
89-
transform: translateY(-4px) scale(1.02);
90-
}
91-
100% {
92-
transform: translateY(0) scale(1);
93-
}
94-
}
95-
96-
.block-moving {
97-
animation: blockMove 0.3s ease-in-out;
98-
}
99-
100-
/* Smooth transitions for all block movements */
101-
.block-container {
102-
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
103-
}
104-
105-
.block-container.moving {
106-
z-index: 20;
107-
transform: translateY(-2px) scale(1.02);
108-
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
109-
}

‎packages/email-editor/src/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
export { EmailEditor } from "./components/email-editor-root";
22
export type { BlockComponent } from "./types/block-registry";
3+
export type { Email } from "./types/email-editor";
4+
export { renderEmailToHtml } from "./lib/email-renderer";

‎packages/email-editor/src/lib/email-renderer.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -106,11 +106,15 @@ export function EmailTemplate({
106106
);
107107
}
108108

109-
export async function renderEmailToHtml(
110-
email: Email,
111-
utmParams?: UtmParams,
112-
blocks?: BlockComponent[],
113-
): Promise<string> {
109+
export async function renderEmailToHtml({
110+
email,
111+
utmParams,
112+
blocks,
113+
}: {
114+
email: Email;
115+
utmParams?: UtmParams;
116+
blocks?: BlockComponent[];
117+
}): Promise<string> {
114118
try {
115119
const template = (
116120
<BlockRegistryProvider blocks={blocks}>

0 commit comments

Comments
 (0)