implement text-editor to server side

Author: apsinghdev

api/index.js

@@ -3,7 +3,7 @@ import express from "express";
 import {Server} from "socket.io";
 import {createServer} from "http";
 import cors from 'cors';
-import {YSocketIO} from 'y-socket.io';
+import { YSocketIO } from "y-socket.io/dist/server";
 
 const app = express();
 const server = createServer(app);
@@ -12,7 +12,7 @@ const io = new Server(server, {
 });
 const PORT = 8000;
 
-const ysocketio = new YSocketIO(io, {});
+const ysocketio = new YSocketIO(io, {gcEnabled: true});
 
 ysocketio.initialize();
 

client/src/App.jsx

@@ -13,7 +13,16 @@ 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, showMenuState, showTextEditor } from "./atoms";
+import {
+  eraserState,
+  cursorPosition,
+  canvasColors,
+  canvasState,
+  showMenuState,
+  showTextEditor,
+  docState,
+  textState,
+} from "./atoms";
 
 function App() {
   const [showMenu, setShowMenu] = useRecoilState(showMenuState);
@@ -26,9 +35,9 @@ function App() {
   const [penColor, setPenColor] = useState("#000000");
   const canvasColor = useRecoilValue(canvasColors);
   const [currentCanvas, setCanvas] = useRecoilState(canvasState);
-  const [doc, setDoc] = useState(null);
+  const [doc, setDoc] = useRecoilState(docState);
   const [provider, setProvider] = useState(null);
-  const [text, setText] = useState('');
+  const [text, setText] = useRecoilState(textState);
   const textEditor = useRecoilValue(showTextEditor);
 
   useEffect(() => {
@@ -40,7 +49,7 @@ function App() {
   }, [doc]);
 
   useEffect(() => {
-    if (!!doc && !provider) {
+    if (doc && !provider) {
       console.log("setting provider");
       const socketioprovider = new SocketIOProvider(
         "ws://localhost:8000",
@@ -64,7 +73,7 @@ function App() {
         yText.unobserve(observer);
       };
     }
-  }, [provider]);
+  }, [provider, doc]);
 
   function toggleMenu() {
     setShowMenu(!showMenu);
@@ -204,8 +213,9 @@ function App() {
       {eraserMode && <EraserCursor></EraserCursor>}
       {showMenu && <Menu></Menu>}
       {textEditor && <TextEditor></TextEditor>}
+      {console.log(text)}
     </div>
   );
 }
 
-export default App;
+export default App;

client/src/atoms.js

@@ -28,4 +28,14 @@ export const showMenuState = atom({
 export const showTextEditor = atom({
   key: "showTextEditor",
   default: false
+})
+
+export const docState = atom({
+  key: "docState",
+  default: null
+})
+
+export const textState = atom({
+  key: "textState",
+  default: null
 })

client/src/components/TextEditor.jsx

@@ -1,16 +1,25 @@
-import { useSetRecoilState } from "recoil";
-import { showTextEditor } from "../atoms";
+import { useSetRecoilState, useRecoilValue } from "recoil";
+import { showTextEditor, docState, textState } from "../atoms";
 
 function TextEditor() {
   const setTextEditorFalse = useSetRecoilState(showTextEditor);
+  const doc = useRecoilValue(docState);
+  const text = useRecoilValue(textState);
 
   function removeTextEditor() {
     setTextEditorFalse(false);
   }
 
+  function handleChange(event) {
+    const newText = event.target.value;
+    const yText = doc.getText('text');
+    yText.delete(0, yText.length);
+    yText.insert(0, newText);
+  }
+
   return (
-    <div className="w-96 h-96 absolute shadow rounded absolute">
-      <div className="bg-gray bg-slate-800 w-96 h-14 content-center">
+    <div className="w-96 h-96 absolute absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+      <div className="bg-gray bg-slate-800 w-96 h-14 content-center rounded-t-2xl">
         <h1 className="font-sans text-white text-lg justify-center flex">
           Plan your drawing
         </h1>
@@ -22,8 +31,10 @@ function TextEditor() {
         </h1>
       </div>
       <textarea
-        className="w-96 h-80 border rounded absolute focus:outline-none focus:ring-0 focus:border-transparent"
+        className="w-96 h-80 border rounded absolute focus:outline-none focus:ring-0 focus:border-transparent rounded-b-2xl p-2"
         placeholder="E.g. Make a painting with trees..."
+        onChange={handleChange}
+        value={text}
       ></textarea>
     </div>
   );