Merge branch 'pr/99'

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState, useCallback } from "react";
+import { useRef, useState } from "react";
 import ImageUpload from "./components/ImageUpload";
 import CodePreview from "./components/CodePreview";
 import Preview from "./components/Preview";
@@ -7,7 +7,6 @@ import Spinner from "./components/Spinner";
 import classNames from "classnames";
 import {
   FaCode,
-  FaCopy,
   FaDesktop,
   FaDownload,
   FaMobile,
@@ -15,12 +14,9 @@ import {
 } from "react-icons/fa";
 
 import { Switch } from "./components/ui/switch";
-import copy from "copy-to-clipboard";
-import toast from "react-hot-toast";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs";
-import CodeMirror from "./components/CodeMirror";
 import SettingsDialog from "./components/SettingsDialog";
 import { Settings, EditorTheme, AppState } from "./types";
 import { IS_RUNNING_ON_CLOUD } from "./config";
@@ -31,6 +27,7 @@ import { UrlInputSection } from "./components/UrlInputSection";
 import TermsOfServiceDialog from "./components/TermsOfServiceDialog";
 import html2canvas from "html2canvas";
 import { USER_CLOSE_WEB_SOCKET_CODE } from "./constants";
+import CodeTab from "./components/CodeTab";
 
 function App() {
   const [appState, setAppState] = useState<AppState>(AppState.INITIAL);
@@ -152,11 +149,6 @@ function App() {
     setUpdateInstruction("");
   }
 
-  const doCopyCode = useCallback(() => {
-    copy(generatedCode);
-    toast.success("Copied to clipboard");
-  }, [generatedCode]);
-
   const handleTermDialogOpenChange = (open: boolean) => {
     setSettings((s) => ({
       ...s,
@@ -316,20 +308,11 @@ function App() {
                 <Preview code={generatedCode} device="mobile" />
               </TabsContent>
               <TabsContent value="code">
-                <div className="relative">
+                <CodeTab
-                  <CodeMirror
                   code={generatedCode}
-                    editorTheme={settings.editorTheme}
+                  setCode={setGeneratedCode}
-                    onCodeChange={setGeneratedCode}
+                  settings={settings}
                 />
-                  <span
-                    title="Copy Code"
-                    className="flex items-center justify-center w-10 h-10 text-gray-500 hover:bg-gray-100 cursor-pointer rounded-lg text-sm p-2.5 absolute top-[20px] right-[20px]"
-                    onClick={doCopyCode}
-                  >
-                    <FaCopy />
-                  </span>
-                </div>
               </TabsContent>
             </Tabs>
           </div>

frontend/src/components/CodeTab.tsx

@@ -0,0 +1,87 @@
+import { FaCopy } from "react-icons/fa";
+import CodeMirror from "./CodeMirror";
+import { Button } from "./ui/button";
+import { Settings } from "../types";
+import copy from "copy-to-clipboard";
+import { useCallback } from "react";
+import toast from "react-hot-toast";
+
+interface Props {
+  code: string;
+  setCode: React.Dispatch<React.SetStateAction<string>>;
+  settings: Settings;
+}
+
+function CodeTab({ code, setCode, settings }: Props) {
+  const copyCode = useCallback(() => {
+    copy(code);
+    toast.success("Copied to clipboard");
+  }, [code]);
+
+  const doOpenInCodepenio = useCallback(async () => {
+    // TODO: Update CSS and JS external links depending on the framework being used
+    const data = {
+      html: code,
+      editors: "100", // 1: Open HTML, 0: Close CSS, 0: Close JS
+      layout: "left",
+      css_external:
+        "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" +
+        (code.includes("<ion-")
+          ? ",https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"
+          : ""),
+      js_external:
+        "https://cdn.tailwindcss.com " +
+        (code.includes("<ion-")
+          ? ",https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js,https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"
+          : ""),
+    };
+
+    // Create a hidden form and submit it to open the code in CodePen
+    // Can't use fetch API directly because we want to open the URL in a new tab
+    const input = document.createElement("input");
+    input.setAttribute("type", "hidden");
+    input.setAttribute("name", "data");
+    input.setAttribute("value", JSON.stringify(data));
+
+    const form = document.createElement("form");
+    form.setAttribute("method", "POST");
+    form.setAttribute("action", "https://codepen.io/pen/define");
+    form.setAttribute("target", "_blank");
+    form.appendChild(input);
+
+    document.body.appendChild(form);
+    form.submit();
+  }, [code]);
+
+  return (
+    <div className="relative">
+      <div className="flex justify-start items-center px-4 mb-2">
+        <span
+          title="Copy Code"
+          className="bg-black text-white flex items-center justify-center hover:text-black hover:bg-gray-100 cursor-pointer rounded-lg text-sm p-2.5"
+          onClick={copyCode}
+        >
+          Copy Code <FaCopy className="ml-2" />
+        </span>
+        <Button
+          onClick={doOpenInCodepenio}
+          className="bg-gray-100 text-black ml-2 py-2 px-4 border border-black rounded-md hover:bg-gray-400 focus:outline-none"
+        >
+          Open in{" "}
+          <img
+            src="https://assets.codepen.io/t-1/codepen-logo.svg"
+            alt="codepen.io"
+            className="h-4 ml-1"
+          />
+        </Button>
+      </div>
+      <CodeMirror
+        code={code}
+        editorTheme={settings.editorTheme}
+        onCodeChange={setCode}
+      />
+    </div>
+  );
+}
+
+export default CodeTab;