create TextEditor component

Author: apsinghdev

client/src/App.jsx

@@ -11,6 +11,7 @@ import Sidebar from "./components/Sidebar";
 import Canvas from "./components/Canvas";
 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";
 
@@ -32,7 +33,7 @@ function App() {
   useEffect(() => {
     if (!doc) {
       console.log("setting doc");
-      const _doc = Y.Doc();
+      const _doc = new Y.Doc();
       setDoc(_doc);
     }
   }, [doc]);
@@ -201,6 +202,7 @@ function App() {
       <Canvas canvasRef={canvasRef}></Canvas>
       {eraserMode && <EraserCursor></EraserCursor>}
       {showMenu && <Menu></Menu>}
+      <TextEditor></TextEditor>
     </div>
   );
 }

client/src/components/TextEditor.jsx

@@ -0,0 +1,17 @@
+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>
+      </div>
+    );
+}
+
+export default TextEditor;