khairul169/code-share
1
0
Fork 0
mirror of https://github.com/khairul169/code-share.git synced 2025-04-28 16:49:36 +07:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: add readonly mode to editor

Browse Source
This commit is contained in:
Khairul Hidayat 2024-03-12 07:46:07 +07:00
parent 89759e7288
commit 7c187452f9
4 changed files with 41 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
components/ui/code-editor.tsx
View File

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

6
pages/project/@slug/components/file-listing.tsx
View File

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

5
pages/project/@slug/components/file-viewer.tsx
View File

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

2
pages/project/@slug/context/project.tsx
View File

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