feat: add vscode slice for message passing with extension #3080
Conversation
Pull Request Test Coverage Report for Build 13630765162Warning: This coverage report may be inaccurate.This pull request's base commit is no longer the HEAD commit of its target branch. This means it includes changes from outside the original pull request, including, potentially, unrelated coverage changes.
Details
💛 - Coveralls |
| // useEffect(() => { | ||
| // // TODO: Hardcoded to make use of the first editor tab. Refactoring is needed for this workspace to enable Folder mode. | ||
| // handleEditorValueChange(0, ''); | ||
| // // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| // }, []); |
There was a problem hiding this comment.
Will this break anything with assessments? Have you tested locally?
There was a problem hiding this comment.
From my local testing, there's no unintended behavior. Assessments still loading as per normal.
handleEditorValueChange is ultimately called with the editor contents due to the useEffect here.
There was a problem hiding this comment.
Let's just delete and clean up all this unused code then
src/commons/workspace/Workspace.tsx
Outdated
| @@ -222,7 +223,11 @@ const Workspace: React.FC<WorkspaceProps> = props => { | |||
| </Resizable> | |||
| <div className="row content-parent" ref={contentContainerDiv}> | |||
| <div className="editor-divider" ref={editorDividerDiv} /> | |||
| <Resizable {...editorResizableProps()}>{createWorkspaceInput(props)}</Resizable> | |||
| {isVscode ? ( | |||
| <div style={{ width: '0px' }}>{createWorkspaceInput(props)}</div> | |||
There was a problem hiding this comment.
It must still be visible is it? We can't use visibility: hidden? If we can't, then in addition to width: 0, should we also use overflow: hidden?
There was a problem hiding this comment.
While visibility: hidden wouldn't work, I think we can completely remove it now that messages are passed directly to the redux store rather than to the editor.
Co-authored-by: Richard Dominick <[email protected]>
| window.confirm = () => { | ||
| console.log('You gotta confirm!'); | ||
| return true; | ||
| }; |
There was a problem hiding this comment.
Should we use if (window.confirm) ... instead?
| // useEffect(() => { | ||
| // // TODO: Hardcoded to make use of the first editor tab. Refactoring is needed for this workspace to enable Folder mode. | ||
| // handleEditorValueChange(0, ''); | ||
| // // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| // }, []); |
There was a problem hiding this comment.
Let's just delete and clean up all this unused code then
| const message: MessageType = event.data; | ||
| // Only accept messages from the vscode webview | ||
| if (!event.origin.startsWith('vscode-webview://')) { | ||
| return; |
There was a problem hiding this comment.
I know this is a guard, but shall we log such an event?
Technically we might be able to configure our deployment with X-Frame-Options: DENY to prevent embedding but let's look into it another time
There was a problem hiding this comment.
Note to self: also add Content-Security-Policy frame-ancestors 'none';
There was a problem hiding this comment.
Adding header X-Frame-Options: DENY does not compromise the usability of the VSC extension, but Content-Security-Policy: frame-ancestors 'none'; will cause the request to be blocked within VSC.
Description
FYP: Source Academy as Visual Studio Code Extension
This PR makes the frontend's behavior change conditionally when it detects itself to be running as an iframe in the VS Code extension. This is required so that it can send and receive the editor text contents, encapsulated as messages, to the VS Code extension.
Type of change
How to test
Checklist