From 69623fa29e5719c9dd5ecfa4eede0a55ca774177 Mon Sep 17 00:00:00 2001
From: Diego Akel <diegoakel1@gmail.com>
Date: Thu, 16 Nov 2023 15:18:50 +0100
Subject: [PATCH] adds Copy HTML button

---
 components/PreviewModal.tsx | 15 ++++++++++++---
 package-lock.json           |  3 +++
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/components/PreviewModal.tsx b/components/PreviewModal.tsx
index 0f032c44..e8e924de 100644
--- a/components/PreviewModal.tsx
+++ b/components/PreviewModal.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { use, useEffect, useState } from "react";
 import Prism from "prismjs";
 import "prismjs/components/prism-cshtml";
@@ -26,6 +24,11 @@ export function PreviewModal({
     return null;
   }
 
+  const copyToClipboard = async () => {
+    await navigator.clipboard.writeText(html || '');
+    alert('HTML copied to clipboard');
+  };
+
   return (
     <div
       onClick={(e) => {
@@ -55,6 +58,12 @@ export function PreviewModal({
           >
             Code
           </TabButton>
+          <TabButton
+            active={false}
+            onClick={copyToClipboard}
+          >
+            Copy HTML
+          </TabButton>
         </div>
 
         <button
@@ -101,4 +110,4 @@ function TabButton({ active, ...buttonProps }: TabButtonProps) {
     ? "px-4 py-2 text-sm font-medium text-white bg-blue-500 rounded-t-md focus:outline-none focus:ring"
     : "px-4 py-2 text-sm font-medium text-blue-500 bg-transparent hover:bg-blue-100 focus:bg-blue-100 rounded-t-md focus:outline-none focus:ring";
   return <button className={className} {...buttonProps}></button>;
-}
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index e9e30980..714a20f4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,9 @@
         "postcss": "^8",
         "tailwindcss": "^3.3.0",
         "typescript": "^5"
+      },
+      "engines": {
+        "node": ">=18.0.0"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {