[FIX] Working Text Editor

src/components/files/FilePreview.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, memo } from "react";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { useTheme } from "@mui/material/styles";
 import Button from "@mui/material/Button";
@@ -8,8 +8,7 @@ import DialogActions from "@mui/material/DialogActions";
 import Dialog from "@mui/material/Dialog";
 import Toolbar from "@mui/material/Toolbar";
 
-import ReactQuill from "react-quill";
+import TextEditor from "./TextEditor.jsx";
-import "react-quill/dist/quill.snow.css";
 
 const textFileTypes = ["properties", "txt", "yaml", "yml", "json", "env"];
 const imageFileTypes = ["png", "jpeg", "jpg"];
@@ -24,6 +23,7 @@ export function useFilePreview(isOpen = false) {
 
 export default function FilePreview(props) {
   const [fileText, setFileText] = useState();
+  const [modifiedText, setModifiedText] = useState();
   const theme = useTheme();
   const fullScreen = useMediaQuery(theme.breakpoints.down("md"));
 
@@ -32,15 +32,7 @@ export default function FilePreview(props) {
   const ext = name ? name.split(".").pop() : null;
   const isTextFile = textFileTypes.includes(ext);
 
-  const buildDelta = (text) => {
+  const editorChange = (v) => setModifiedText(v);
-    if (!text) return;
-    console.log("building delta");
-    return { ops: text.split("\n").map((l) => ({ insert: `${l}\n` })) };
-  };
-
-  async function onEditorChange(content, delta, source, editor) {
-    console.log(editor.getText());
-  }
 
   async function onPreviewChange() {
     if (!isTextFile) return;
@@ -49,7 +41,7 @@ export default function FilePreview(props) {
   }
 
   async function onSave() {
-    console.log(editorText);
+    console.log(modifiedText);
   }
 
   useEffect(() => {
@@ -76,11 +68,7 @@ export default function FilePreview(props) {
       <Toolbar sx={{ display: { sm: "none" } }} />
       <DialogTitle>{name}</DialogTitle>
       <DialogContent>
-        <ReactQuill
+        <TextEditor text={fileText} onChange={editorChange} />
-          theme="snow"
-          value={buildDelta(fileText)}
-          onChange={onEditorChange}
-        />
       </DialogContent>
       <DialogActions>
         <Button autoFocus onClick={dialogToggle}>

src/components/files/TextEditor.jsx

@@ -0,0 +1,21 @@
+import ReactQuill from "react-quill";
+import { useState, useEffect, useMemo, memo } from "react";
+import "react-quill/dist/quill.snow.css";
+
+const buildDelta = (t) => {
+  if (!t) return;
+  const ops = t.split("\n").map((l) => ({ insert: `${l}\n` }));
+  return { ops };
+};
+
+function TextEditor(props) {
+  const { text, onChange } = props;
+  const [delta, setDelta] = useState();
+  const constructDelta = useMemo(() => buildDelta(text), [text]);
+  useEffect(() => setDelta(constructDelta), [text]);
+
+  const onEditorChange = (c, d, s, editor) => onChange(editor.getText());
+
+  return <ReactQuill theme="snow" value={delta} onChange={onEditorChange} />;
+}
+export default memo(TextEditor, (a, b) => a.text === b.text);