Merge pull request #2 from sparrow-js/part-edit

Part edit

Author: sparrow-js

components/App.tsx

@@ -0,0 +1,81 @@
+export const MOCK_NEXT_GENERATED_UIDS: { current: string[] } = { current: [] };
+export const MOCK_NEXT_GENERATED_UIDS_IDX = { current: 0 };
+
+export function generateMockNextGeneratedUID(): string | null {
+  if (
+    MOCK_NEXT_GENERATED_UIDS.current.length > 0 &&
+    MOCK_NEXT_GENERATED_UIDS_IDX.current < MOCK_NEXT_GENERATED_UIDS.current.length
+  ) {
+    const nextID = MOCK_NEXT_GENERATED_UIDS.current[MOCK_NEXT_GENERATED_UIDS_IDX.current];
+    MOCK_NEXT_GENERATED_UIDS_IDX.current += 1;
+    return nextID;
+  } else {
+    return null;
+  }
+}
+
+export const atoz = [
+    'a',
+    'b',
+    'c',
+    'd',
+    'e',
+    'f',
+    'g',
+    'h',
+    'i',
+    'j',
+    'k',
+    'l',
+    'm',
+    'n',
+    'o',
+    'p',
+    'q',
+    'r',
+    's',
+    't',
+    'u',
+    'v',
+    'w',
+    'x',
+    'y',
+    'z',
+];
+
+export function generateConsistentUID(
+    possibleStartingValue: string,
+    ...existingIDSets: Array<Set<string>>
+): string {
+    function alreadyExistingID(idToCheck: string): boolean {
+        return existingIDSets.some((s) => s.has(idToCheck));
+    }
+    const mockUID = generateMockNextGeneratedUID();
+    if (mockUID == null) {
+        if (possibleStartingValue.length >= 3) {
+            const maxSteps = Math.floor(possibleStartingValue.length / 3);
+            for (let step = 0; step < maxSteps; step++) {
+              const possibleUID = possibleStartingValue.substring(step * 3, (step + 1) * 3);
+
+              if (!alreadyExistingID(possibleUID)) {
+                return possibleUID;
+              }
+            }
+        }
+
+        for (let firstChar of atoz) {
+            for (let secondChar of atoz) {
+              for (let thirdChar of atoz) {
+                const possibleUID = `${firstChar}${secondChar}${thirdChar}`;
+
+                if (!alreadyExistingID(possibleUID)) {
+                  return possibleUID;
+                }
+              }
+            }
+        }
+        throw new Error(`Unable to generate a UID from '${possibleStartingValue}'.`);
+    } else {
+        return mockUID;
+    }
+}

components/compiler/index.ts

@@ -16,8 +16,8 @@ function CodePreview({ code }: Props) {
   return (
     <div
       ref={scrollRef}
-      className="w-full px-2 bg-black text-green-400 whitespace-nowrap flex 
-      overflow-x-auto font-mono text-[10px] my-4"
+      className="w-full px-2 py-1 bg-black text-green-400 whitespace-nowrap flex 
+      overflow-x-auto font-mono text-[10px] my-2"
     >
       {code}
     </div>

components/compiler/uid-utils.ts

@@ -4,7 +4,10 @@ import { Settings } from "../types";
 import copy from "copy-to-clipboard";
 import { useCallback } from "react";
 import toast from "react-hot-toast";
-import Editor from '@monaco-editor/react';
+import * as monaco from 'monaco-editor';
+import Editor, { loader } from '@monaco-editor/react';
+
+loader.config({ monaco });
 
 interface Props {
   code: string;
@@ -13,73 +16,12 @@ interface Props {
 }
 
 function CodeTab({ code, setCode, settings }: Props) {
-  console.log(settings);
-  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>
+    <div className="relative h-full flex flex-col">
       <Editor
-        height="70vh" 
         defaultLanguage="html" 
-        defaultValue="// some comment" 
+        defaultValue="" 
         value={code}
         onChange={(value) => {
           setCode(value as string)