fix: add readonly mode to editor

components/ui/code-editor.tsx

@@ -18,13 +18,13 @@ type Props = {
   wordWrap?: boolean;
   onChange: (val: string) => void;
   formatOnSave?: boolean;
+  isReadOnly?: boolean;
 };
 
 const CodeEditor = (props: Props) => {
-  const { filename, path, value, formatOnSave, wordWrap, onChange } = props;
+  const { filename, path, value, formatOnSave, isReadOnly, onChange } = props;
   const editorRef = useRef<any>(null);
   const [isMounted, setMounted] = useState(false);
-  const [data, setData] = useState(value);
   const [debounceChange, resetDebounceChange] = useDebounce(onChange, 3000);
   const language = useMemo(() => getLanguage(filename), [filename]);
 
@@ -54,6 +54,10 @@ const CodeEditor = (props: Props) => {
   }, []);
 
   const onSave = useCallback(async () => {
+    if (isReadOnly) {
+      return;
+    }
+
     const editor = editorRef.current;
     if (!editor) {
       return;
@@ -101,24 +105,28 @@ const CodeEditor = (props: Props) => {
     }
 
     setTimeout(() => resetDebounceChange(), 100);
-  }, [language.formatter, formatOnSave, onChange, resetDebounceChange]);
-
-  useEffect(() => {
-    setData(value);
-
-    const editor = editorRef.current;
-    const model = editor?.getModel();
-
-    if (editor && model?.uri.path.substring(1) === path) {
-      editor.executeEdits("", [
-        {
-          range: editor.getModel()!.getFullModelRange(),
-          text: value,
-          forceMoveMarkers: true,
-        },
+  }, [
+    language.formatter,
+    formatOnSave,
+    onChange,
+    resetDebounceChange,
+    isReadOnly,
   ]);
-    }
-  }, [value]);
+
+  // useEffect(() => {
+  //   const editor = editorRef.current;
+  //   const model = editor?.getModel();
+
+  //   if (editor && model?.uri.path.substring(1) === path) {
+  //     editor.executeEdits("", [
+  //       {
+  //         range: editor.getModel()!.getFullModelRange(),
+  //         text: value,
+  //         forceMoveMarkers: true,
+  //       },
+  //     ]);
+  //   }
+  // }, [value]);
 
   useCommandKey("s", onSave);
 
@@ -131,7 +139,12 @@ const CodeEditor = (props: Props) => {
         defaultValue={value}
         height="100%"
         onMount={onMount}
-        onChange={(e: string) => debounceChange(e)}
+        options={{ readOnly: isReadOnly }}
+        onChange={(e: string) => {
+          if (!isReadOnly) {
+            debounceChange(e);
+          }
+        }}
       />
     </div>
   );

pages/project/@slug/components/file-listing.tsx

@@ -58,12 +58,12 @@ const FileListing = () => {
             <ActionButton icon={FiMoreVertical} />
           </DropdownMenuTrigger>
           <DropdownMenuContent align="start">
-            <DropdownMenuItem>Upload File</DropdownMenuItem>
-            <DropdownMenuSeparator />
+            {/* <DropdownMenuItem>Upload File</DropdownMenuItem> */}
+            {/* <DropdownMenuSeparator /> */}
             <DropdownMenuItem onClick={() => settingsDialog.setState(true)}>
               Project Settings
             </DropdownMenuItem>
-            <DropdownMenuItem>Download Project</DropdownMenuItem>
+            {/* <DropdownMenuItem>Download Project</DropdownMenuItem> */}
           </DropdownMenuContent>
         </DropdownMenu>
       </div>

pages/project/@slug/components/file-viewer.tsx

@@ -47,8 +47,13 @@ const FileViewer = ({ id }: Props) => {
           filename={data.filename}
           path={data.path}
           value={data.content || ""}
+          isReadOnly={!project.isMutable}
           formatOnSave
           onChange={(val) => {
+            if (!project.isMutable) {
+              return;
+            }
+
             updateFileContent.mutate({
               projectId: project.id,
               id,

pages/project/@slug/context/project.tsx

@@ -2,7 +2,7 @@ import { createContext, useContext } from "react";
 import type { ProjectSchema } from "~/server/db/schema/project";
 
 type TProjectContext = {
-  project: ProjectSchema;
+  project: ProjectSchema & { isMutable: boolean };
   isCompact?: boolean;
   isEmbed?: boolean;
 };