Merge pull request #49 from philippetedajo/fix

Fix

_types/editorTypes.ts

@@ -1,6 +1,7 @@
 export interface LanguagePropsInterface {
+  title: string;
+  monacoLanguage: string;
   data: string;
-  transformer: string;
 }
 
 export interface IObjectKeys {
@@ -17,5 +18,5 @@ export interface EditorValueInterface {
   name: string;
   description: string;
   public: boolean;
-  languages: LanguagesInterface;
+  tabs: LanguagesInterface;
 }

constants/templates.ts

@@ -4,18 +4,21 @@ export const treeTemplates = {
     description: "By codetree",
     public: true,
     iconSrc: "/icons/vanilla.svg",
-    languages: {
+    tabs: {
       javascript: {
+        title: "Js/Jsx",
+        monacoLanguage: "javascript",
         data: ``,
-        transformer: "javascript",
       },
-      css: {
+      html: {
+        title: "Html",
+        monacoLanguage: "html",
         data: ``,
-        transformer: "css",
       },
-      html: {
+      css: {
+        title: "Css",
+        monacoLanguage: "css",
         data: ``,
-        transformer: "html",
       },
     },
   },
@@ -24,50 +27,37 @@ export const treeTemplates = {
     description: "By codetree",
     public: true,
     iconSrc: "/icons/vanilla.svg",
-    languages: {
+    tabs: {
       javascript: {
-        data: `import gsap from "gsap"
-
-var tl = gsap.timeline({ repeat: -1 });
-tl.to("h1", 30, { backgroundPosition: "-960px 0" });
+        title: "Js/Jsx",
+        monacoLanguage: "javascript",
+        data: `document.getElementById("app").innerHTML = \`
+<h1>Vanilla</h1>
+<div>
+  Bare minimal javascript template
+</div>
+\`;
 `,
-        transformer: "js",
       },
       html: {
-        data: `<div class="wrapper">
-  <h1 class="title">Codetree<h1>
-</div> `,
-        transformer: "html",
+        title: "Html",
+        monacoLanguage: "html",
+        data: `<div id="app"></div>`,
       },
-        css: {
+      css: {
+        title: "Css",
+        monacoLanguage: "css",
         data: `body {
-  background-color: #1d1d1d;
-  margin: 0;
-  padding: 0;
+  font-family: sans-serif;
 }
 
-.wrapper {
+#app {
   display: flex;
-  height: 100vh;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
 }
-
-h1 {
-  max-width: 75%;
-  font-size: 100px;
-  text-align: center;
-  font-family: "Montserrat", sans-serif;
-  color: #540032;
-}
-
-.title {
-  background-image: url(https://cdn.pixabay.com/photo/2017/07/03/20/17/abstract-2468874_960_720.jpg);
-  background-attachment: fixed;
-  -webkit-text-fill-color: transparent;
-  -webkit-background-clip: text;
-}`,
-        transformer: "css",
+`,
       },
     },
   },
@@ -76,8 +66,10 @@ h1 {
     description: "By codetree",
     public: true,
     iconSrc: "/icons/p5-dot-js.svg",
-    languages: {
+    tabs: {
       javascript: {
+        title: "Js/Jsx",
+        monacoLanguage: "javascript",
         data: `import p5 from "p5";
 
 let sketch = function (p) {
@@ -94,9 +86,15 @@ let sketch = function (p) {
  
 new p5(sketch, window.document.getElementById("container"));
 `,
-        transformer: "javascript",
+      },
+      html: {
+        title: "Html",
+        monacoLanguage: "html",
+        data: ``,
       },
       css: {
+        title: "Css",
+        monacoLanguage: "css",
         data: `body {
   margin: 0px;
   font-family: sans-serif;
@@ -105,11 +103,6 @@ canvas {
   margin: 0px;
 }
 `,
-        transformer: "css",
-      },
-      html: {
-        data: ``,
-        transformer: "html",
       },
     },
   },
@@ -118,8 +111,10 @@ canvas {
     description: "By codetree",
     public: true,
     iconSrc: "/icons/reactjs.svg",
-    languages: {
+    tabs: {
       javascript: {
+        title: "Js/Jsx",
+        monacoLanguage: "javascript",
         data: `import React, { useState } from "react";
 import ReactDOM from "react-dom";
 
@@ -140,19 +135,75 @@ function App() {
 const rootElement = document.getElementById("root");
 ReactDOM.render(<App />, rootElement);
 `,
-        transformer: "javascript",
+      },
+      html: {
+        title: "Html",
+        monacoLanguage: "html",
+        data: ``,
       },
       css: {
+        title: "Css",
+        monacoLanguage: "css",
         data: `.App {
   font-family: sans-serif;
   text-align: center;
 }
 `,
-        transformer: "css",
+      },
+    },
+  },
+  _gsap: {
+    name: "Gsap",
+    description: "By codetree",
+    public: true,
+    iconSrc: "/icons/gsap-greensock.svg",
+    tabs: {
+      javascript: {
+        title: "Js/Jsx",
+        monacoLanguage: "javascript",
+        data: `import gsap from "gsap"
+
+var tl = gsap.timeline({ repeat: -1 });
+tl.to("h1", 30, { backgroundPosition: "-960px 0" });
+`,
       },
       html: {
-        data: ``,
-        transformer: "html",
+        title: "Html",
+        monacoLanguage: "html",
+        data: `<div class="wrapper">
+  <h1 class="title">Codetree<h1>
+</div> `,
+      },
+      css: {
+        title: "Css",
+        monacoLanguage: "css",
+        data: `body {
+  background-color: #1d1d1d;
+  margin: 0;
+  padding: 0;
+}
+
+.wrapper {
+  display: flex;
+  height: 100vh;
+  justify-content: center;
+  align-items: center;
+}
+
+h1 {
+  max-width: 75%;
+  font-size: 100px;
+  text-align: center;
+  font-family: "Montserrat", sans-serif;
+  color: #540032;
+}
+
+.title {
+  background-image: url(https://cdn.pixabay.com/photo/2017/07/03/20/17/abstract-2468874_960_720.jpg);
+  background-attachment: fixed;
+  -webkit-text-fill-color: transparent;
+  -webkit-background-clip: text;
+}`,
       },
     },
   },

store/features/editorSlice.ts

@@ -31,7 +31,7 @@ export const editorSlice = createSlice({
       state.editorValue = payload;
     },
     update_editor_code: (state: InitialStateType, { payload }) => {
-      state.editorValue.languages[payload.type].data = payload.content;
+      state.editorValue.tabs[payload.type].data = payload.content;
     },
     update_logs: (state: InitialStateType, { payload }) => {
       state.logs = [...state.logs, payload];

ui/EditorInput.tsx

@@ -1,17 +1,19 @@
 import React from "react";
 import Tabs, { TabPane } from "rc-tabs";
 import { Monaco } from "./Monaco";
+import { useAppSelector } from "../store/hook";
+import { editor_state } from "../store/features/editorSlice";
 
 export const EditorInput = () => {
-  const data = [
-    { title: "Js", lang: "javascript" },
-    { title: "Html", lang: "html" },
-    { title: "Css", lang: "css" },
-  ];
+  const { editorValue } = useAppSelector(editor_state);
 
-  const tabPane = data.map((item) => (
-    <TabPane tab={<div>{item.title}</div>} key={item.lang}>
-      <Monaco language={item.lang} />
+  const dataToMap = Object.entries(editorValue.tabs);
+
+  console.log(dataToMap);
+
+  const tabPane = dataToMap.map((item, key) => (
+    <TabPane tab={<div>{item[1].title}</div>} key={key}>
+      <Monaco tab={item[0]} monacoLanguage={item[1].monacoLanguage} />
     </TabPane>
   ));
 

ui/IFrame.tsx

@@ -14,15 +14,12 @@ export const IFrame = () => {
   const iframe = useRef<any>();
   const dispatch = useAppDispatch();
   const {
-    editorValue: { languages },
+    editorValue: { tabs },
   } = useAppSelector(editor_state);
 
   const { output, isCompiling } = useAppSelector(compiler_state);
 
-  const htmlFrameContent = createIframeContent(
-    languages.css.data,
-    languages.html.data
-  );
+  const htmlFrameContent = createIframeContent(tabs.css.data, tabs.html.data);
 
   useEffect(() => {
     //=== incoming message
@@ -38,15 +35,15 @@ export const IFrame = () => {
     };
 
     //=== outgoing massage
-    if (languages.javascript.data) {
+    if (tabs.javascript.data) {
       iframe.current.srcdoc = htmlFrameContent;
 
       setTimeout(async () => {
-        dispatch(getCompileCode(languages.javascript.data));
+        dispatch(getCompileCode(tabs.javascript.data));
         iframe?.current?.contentWindow?.postMessage(output.code, "*");
       }, 50);
     }
-  }, [dispatch, languages, htmlFrameContent, output]);
+  }, [dispatch, tabs, htmlFrameContent, output]);
 
   return (
     <div>

ui/Monaco.tsx

@@ -1,32 +1,34 @@
 import React, { useEffect } from "react";
-import MonacoEditor, { EditorProps } from "@monaco-editor/react";
+import MonacoEditor from "@monaco-editor/react";
 import { useMonaco } from "../hooks";
 import { useAppDispatch, useAppSelector } from "../store/hook";
 import {
   editor_state,
   update_editor_code,
 } from "../store/features/editorSlice";
 
-export const Monaco = ({ language }: EditorProps) => {
+type MonacoType = { monacoLanguage: string | undefined; tab: string };
+
+export const Monaco = ({ monacoLanguage, tab }: MonacoType) => {
   const dispatch = useAppDispatch();
   const { monacoInputValue, options } = useAppSelector(editor_state);
   const { onChange, onMount, code } = useMonaco();
 
   useEffect(() => {
     if (code && code?.length >= 1)
-      dispatch(update_editor_code({ type: language, content: code }));
-  }, [code, dispatch, language]);
+      dispatch(update_editor_code({ type: tab, content: code }));
+  }, [code, dispatch, tab]);
 
   return (
     <MonacoEditor
       onChange={onChange}
       onMount={onMount}
-      language={language}
+      language={monacoLanguage}
       theme="vs-dark"
       options={options}
       className="h-full"
       // @ts-ignore
-      value={monacoInputValue.languages[language].data}
+      value={monacoInputValue.tabs[tab].data}
     />
   );
 };