change Theme and FontSize for Editors

src/components/Editor.js

@@ -28,8 +28,6 @@ import "ace-builds/src-noconflict/theme-terminal";
 import "ace-builds/src-noconflict/theme-solarized_dark";
 import "ace-builds/src-noconflict/theme-solarized_light";
 import { SelectMode } from "../helpers/SelectMode";
-import { SelectTheme } from "../helpers/SelectTheme";
-import { SelectFontSize } from "../helpers/SelectFontSize";
 import "./Editor.css";
 
 export const Editor = ({
@@ -38,9 +36,6 @@ export const Editor = ({
   theme,
   font,
 }) => {
-  const changeTheme = (theme) => onChange({ theme });
-
-  const changeFont = (font) => onChange({ font });
   return (
     <div className="all_editors">
       {"Mode: "}
@@ -51,12 +46,6 @@ export const Editor = ({
         value={data.type}
       />
       <br />
-      {"Theme: "}
-      <SelectTheme onChange={changeTheme} value={data.theme} />
-      <br />
-      {"FontSize: "}
-      <SelectFontSize onChange={changeFont} value={data.font} />
-      <br />
       {"Name of editor: "}
       <input
         placeholder="Enter a name for your editor"

src/components/EditorsPage.js

@@ -36,13 +36,15 @@ const datas = [
 
 export const EditorsPage = (
   data = { type: "", name: "", text: "", index: "", theme: "", font: "" },
-  onSave,
-  onChange
+  onSave
+  //   onChange
 ) => {
   const [editors, setEditors] = useState(datas);
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
   const [srcDoc, setSrcDoc] = useState("");
+  const [theme, setTheme] = useState();
+  const [font, setFont] = useState();
 
   useEffect(() => {
     const timeout = setTimeout(() => {
@@ -64,18 +66,14 @@ export const EditorsPage = (
     return () => clearTimeout(timeout);
   }, [editors]);
 
-  const changeTheme = (theme) => onChange({ theme });
-
-  const changeFont = (font) => onChange({ font });
-
   return (
     <>
       <div className="styles">
         {"Theme: "}
-        <SelectTheme onChange={() => changeTheme} value={data.theme} />
+        <SelectTheme onChange={setTheme} value={theme} />
         <br />
         {"FontSize: "}
-        <SelectFontSize onChange={() => changeFont} value={data.font} />
+        <SelectFontSize onChange={setFont} value={font} />
         <br />
       </div>
       {editors.map((data, index) => {
@@ -83,8 +81,8 @@ export const EditorsPage = (
           <Editor
             data={data}
             key={index}
-            theme='monokai'
-            font={16}
+            theme={theme}
+            font={font}
             onChange={(newData) => {
               let editor = [...editors];
               editor.splice(index, 1, newData);