Skip to content

feat: add read only marker and read only mode #1899

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 4, 2025
Merged

feat: add read only marker and read only mode #1899

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions frontend/app/view/codeeditor/codeeditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,13 +112,14 @@ interface CodeEditorProps {
blockId: string;
text: string;
filename: string;
fileinfo: FileInfo;
language?: string;
meta?: MetaType;
onChange?: (text: string) => void;
onMount?: (monacoPtr: MonacoTypes.editor.IStandaloneCodeEditor, monaco: Monaco) => () => void;
}

export function CodeEditor({ blockId, text, language, filename, meta, onChange, onMount }: CodeEditorProps) {
export function CodeEditor({ blockId, text, language, filename, fileinfo, meta, onChange, onMount }: CodeEditorProps) {
const divRef = useRef<HTMLDivElement>(null);
const unmountRef = useRef<() => void>(null);
const minimapEnabled = useOverrideConfigAtom(blockId, "editor:minimapenabled") ?? false;
Expand Down Expand Up @@ -169,12 +170,13 @@ export function CodeEditor({ blockId, text, language, filename, meta, onChange,

const editorOpts = useMemo(() => {
const opts = defaultEditorOptions();
opts.readOnly = fileinfo.readonly;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Issue Found: readonly Property Missing on FileInfo Type
Our search indicates that the FileInfo type defined in ./frontend/types/gotypes.d.ts does not include a readonly property, yet it is being accessed in frontend/app/view/codeeditor/codeeditor.tsx (line 173).

  • The only properties in the FileInfo type are path, dir, name, notfound, and opts.
  • This discrepancy can lead to potential runtime errors when setting opts.readOnly based on fileinfo.readonly.

Please update the FileInfo type definition to include the readonly: boolean property if that information is expected to be available at runtime.

🔗 Analysis chain

Verify the existence of readonly property on FileInfo type.

Please ensure that the readonly property exists on the FileInfo type to prevent potential runtime errors.

Run the following script to verify the property:

I'm going to re-run a search that checks for FileInfo definitions including the "readonly" property in their context. This will help ensure that we manually verify the existence (or absence) of the property.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Search for readonly property in FileInfo type/interface.

# Test: Search for readonly property in FileInfo type
ast-grep --pattern 'type FileInfo = {
  $$$
  readonly: boolean
  $$$
}'

# Test: Search for readonly property in FileInfo interface
ast-grep --pattern 'interface FileInfo {
  $$$
  readonly: boolean
  $$$
}'

Length of output: 152

Script:

#!/bin/bash
# Search for FileInfo definitions and include several lines of context to capture the "readonly" property.
echo "Searching FileInfo interface definitions with context:"
rg -n "interface FileInfo" --context 5 .

echo "Searching FileInfo type definitions with context:"
rg -n "type FileInfo" --context 5 .

Length of output: 1974

opts.minimap.enabled = minimapEnabled;
opts.stickyScroll.enabled = stickyScrollEnabled;
opts.wordWrap = wordWrap ? "on" : "off";
opts.fontSize = fontSize;
return opts;
}, [minimapEnabled, stickyScrollEnabled, wordWrap, fontSize]);
}, [minimapEnabled, stickyScrollEnabled, wordWrap, fontSize, fileinfo.readonly]);

return (
<div className="code-editor-wrapper">
Expand Down
39 changes: 31 additions & 8 deletions frontend/app/view/preview/preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -259,14 +259,35 @@ export class PreviewModel implements ViewModel {
saveClassName = "green";
}
if (isCeView) {
viewTextChildren.push({
elemtype: "textbutton",
text: "Save",
className: clsx(
`${saveClassName} warning border-radius-4 vertical-padding-2 horizontal-padding-10 font-size-11 font-weight-500`
),
onClick: () => fireAndForget(this.handleFileSave.bind(this)),
});
const fileInfo = globalStore.get(this.loadableFileInfo);
if (fileInfo.state != "hasData") {
viewTextChildren.push({
elemtype: "textbutton",
text: "Loading ...",
className: clsx(
`grey warning border-radius-4 vertical-padding-2 horizontal-padding-10 font-size-11 font-weight-500`
),
onClick: () => {},
});
} else if (fileInfo.data.readonly) {
viewTextChildren.push({
elemtype: "textbutton",
text: "Read Only",
className: clsx(
`yellow warning border-radius-4 vertical-padding-2 horizontal-padding-10 font-size-11 font-weight-500`
),
onClick: () => {},
});
} else {
viewTextChildren.push({
elemtype: "textbutton",
text: "Save",
className: clsx(
`${saveClassName} warning border-radius-4 vertical-padding-2 horizontal-padding-10 font-size-11 font-weight-500`
),
onClick: () => fireAndForget(this.handleFileSave.bind(this)),
});
}
if (get(this.canPreview)) {
viewTextChildren.push({
elemtype: "textbutton",
Expand Down Expand Up @@ -934,6 +955,7 @@ function CodeEditPreview({ model }: SpecializedViewProps) {
const fileContent = useAtomValue(model.fileContent);
const setNewFileContent = useSetAtom(model.newFileContent);
const fileName = useAtomValue(model.statFilePath);
const fileInfo = useAtomValue(model.statFile);
const blockMeta = useAtomValue(model.blockAtom)?.meta;

function codeEditKeyDownHandler(e: WaveKeyboardEvent): boolean {
Expand Down Expand Up @@ -985,6 +1007,7 @@ function CodeEditPreview({ model }: SpecializedViewProps) {
blockId={model.blockId}
text={fileContent}
filename={fileName}
fileinfo={fileInfo}
meta={blockMeta}
onChange={(text) => setNewFileContent(text)}
onMount={onMount}
Expand Down
Loading