integrate the TextEditor component with workflow

Author: apsinghdev

client/src/App.jsx

@@ -13,10 +13,10 @@ import Menu from "./components/Menu";
 import EraserCursor from "./components/EraserCursor";
 import TextEditor from "./components/TextEditor";
 import { useRecoilValue, useRecoilState } from "recoil";
-import { eraserState, cursorPosition, canvasColors, canvasState } from "./atoms";
+import { eraserState, cursorPosition, canvasColors, canvasState, showMenuState, showTextEditor } from "./atoms";
 
 function App() {
-  const [showMenu, setShowMenu] = useState(false);
+  const [showMenu, setShowMenu] = useRecoilState(showMenuState);
   const eraserMode = useRecoilValue(eraserState);
   const [position, setPosition] = useRecoilState(cursorPosition);
   const [ctx, setCtx] = useState(null);
@@ -29,6 +29,7 @@ function App() {
   const [doc, setDoc] = useState(null);
   const [provider, setProvider] = useState(null);
   const [text, setText] = useState('');
+  const textEditor = useRecoilValue(showTextEditor);
 
   useEffect(() => {
     if (!doc) {
@@ -202,7 +203,7 @@ function App() {
       <Canvas canvasRef={canvasRef}></Canvas>
       {eraserMode && <EraserCursor></EraserCursor>}
       {showMenu && <Menu></Menu>}
-      <TextEditor></TextEditor>
+      {textEditor && <TextEditor></TextEditor>}
     </div>
   );
 }

client/src/atoms.js

@@ -18,4 +18,14 @@ export const canvasColors = atom({
 export const canvasState = atom({
   key: 'canvasState',
   default: ''
+})
+
+export const showMenuState = atom({
+  key: "showMenu",
+  default: false
+})
+
+export const showTextEditor = atom({
+  key: "showTextEditor",
+  default: false
 })

client/src/components/Menu.jsx

@@ -1,13 +1,15 @@
 import MenuItem from "./MenuItem";
 import Socials from "./Socials";
 import SponsorBtn from "./SponsorBtn";
-import { useRecoilValue } from "recoil";
-import { canvasState, canvasColors } from "../atoms";
+import { useRecoilValue, useRecoilState, useSetRecoilState} from "recoil";
+import { canvasState, canvasColors, showTextEditor, showMenuState } from "../atoms";
 import { jsPDF } from "jspdf";
 
 function Menu(){
   const canvas = useRecoilValue(canvasState);
   const canvasColor = useRecoilValue(canvasColors);
+  const [textEditor, setTextEditor] = useRecoilState(showTextEditor)
+  const setMenuStateFalse = useSetRecoilState(showMenuState);
 
   // function to save canvas as pdf
   function saveAsPdf() {
@@ -47,12 +49,18 @@ function Menu(){
     document.body.removeChild(link);
   }
 
+  function openTextEditor(){
+    setTextEditor(true);
+    setMenuStateFalse(false);
+  }
+
   return (
     <div className="w-52 h-71 rounded-xl bg-gradient-to-r from-slate-900 to-slate-700 absolute left-52 top-8 rounded-lg shadow-xl">
       <MenuItem feat="Start Collaboration"></MenuItem>
       <MenuItem feat="Start Chat"></MenuItem>
       <MenuItem feat="Save as pdf" clickHandler={saveAsPdf}></MenuItem>
       <MenuItem feat="Save as png" clickHandler={saveAsPng}></MenuItem>
+      <MenuItem feat="Open text editor" clickHandler={openTextEditor}></MenuItem>
       <SponsorBtn></SponsorBtn>
       <Socials></Socials>
     </div>

client/src/components/TextEditor.jsx

@@ -1,17 +1,32 @@
-function TextEditor(){
-    return (
-      <div className="w-96 h-96 absolute shadow rounded absolute">
-        <div className="bg-gray bg-slate-800 w-96 h-14 content-center">
-          <h1 className="font-sans text-white text-lg justify-center flex">
-            Plan your drawing
-          </h1>
-        </div>
-        <textarea
-          className="w-96 h-80 border rounded absolute focus:outline-none focus:ring-0 focus:border-transparent"
-          placeholder="E.g. Make a painting with trees..."
-        ></textarea>
+import { useSetRecoilState } from "recoil";
+import { showTextEditor } from "../atoms";
+
+function TextEditor() {
+  const setTextEditorFalse = useSetRecoilState(showTextEditor);
+
+  function removeTextEditor() {
+    setTextEditorFalse(false);
+  }
+
+  return (
+    <div className="w-96 h-96 absolute shadow rounded absolute">
+      <div className="bg-gray bg-slate-800 w-96 h-14 content-center">
+        <h1 className="font-sans text-white text-lg justify-center flex">
+          Plan your drawing
+        </h1>
+        <h1
+          className="font-sans text-white text-2xl justify-center absolute right-5 top-3 cursor-pointer hover:text-emerald-300"
+          onClick={removeTextEditor}
+        >
+          ×
+        </h1>
       </div>
-    );
+      <textarea
+        className="w-96 h-80 border rounded absolute focus:outline-none focus:ring-0 focus:border-transparent"
+        placeholder="E.g. Make a painting with trees..."
+      ></textarea>
+    </div>
+  );
 }
 
-export default TextEditor;
+export default TextEditor;