Sync editorValue after inviting

Author: ccyccyccy

src/components/Playground.tsx

@@ -87,13 +87,15 @@ class Playground extends React.Component<IPlaygroundProps, PlaygroundState> {
   public render() {
     const workspaceProps: WorkspaceProps = {
       controlBarProps: {
+        editorValue: this.props.editorValue,
         editorSessionId: this.props.editorSessionId,
         externalLibraryName: this.props.externalLibraryName,
         handleChapterSelect: ({ chapter }: { chapter: number }, e: any) =>
           this.props.handleChapterSelect(chapter),
         handleExternalSelect: ({ name }: { name: ExternalLibraryName }, e: any) =>
           this.props.handleExternalSelect(name),
         handleEditorEval: this.props.handleEditorEval,
+        handleEditorValueChange: this.props.handleEditorValueChange,
         handleGenerateLz: this.props.handleGenerateLz,
         handleInterruptEval: this.props.handleInterruptEval,
         handleInvalidEditorSessionId: this.props.handleInvalidEditorSessionId,

src/components/workspace/ControlBar.tsx

@@ -18,6 +18,7 @@ import { externalLibraries } from '../../reducers/externalLibraries';
 import { sourceChapters } from '../../reducers/states';
 import { ExternalLibraryName } from '../assessment/assessmentShape';
 import { controlButton } from '../commons';
+import Editor from './Editor';
 
 /**
  * @prop questionProgress a tuple of (current question number, question length) where
@@ -27,10 +28,13 @@ export type ControlBarProps = {
   queryString?: string;
   questionProgress: [number, number] | null;
   sourceChapter: number;
+  editorRef?: React.RefObject<Editor>;
   editorSessionId?: string;
+  editorValue?: string | null;
   externalLibraryName?: string;
   handleChapterSelect?: (i: IChapter, e: React.ChangeEvent<HTMLSelectElement>) => void;
   handleEditorEval: () => void;
+  handleEditorValueChange?: (newCode: string) => void;
   handleExternalSelect?: (i: IExternal, e: React.ChangeEvent<HTMLSelectElement>) => void;
   handleGenerateLz?: () => void;
   handleInterruptEval: () => void;
@@ -109,6 +113,12 @@ class ControlBar extends React.PureComponent<ControlBarProps, {}> {
           if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
             const id = JSON.parse(xmlhttp.responseText).id;
             this.props.handleSetEditorSessionId!(id);
+            const code = this.props.editorValue
+              ? this.props.editorValue
+              : '// Collaborative Editing Mode!';
+            this.props.editorRef!.current!.ShareAce.on('ready', () =>
+              this.props.handleEditorValueChange!(code)
+            );
           }
         };
         xmlhttp.open('GET', 'https://api2.sourceacademy.nus.edu.sg/gists/latest', true);

src/components/workspace/Editor.tsx

@@ -29,7 +29,7 @@ class Editor extends React.PureComponent<IEditorProps, {}> {
   private onChangeMethod: (newCode: string) => void;
   private onValidateMethod: (annotations: Annotation[]) => void;
   private AceEditor: React.RefObject<AceEditor>;
-  private ShareAce: any;
+  public ShareAce: any;
 
   constructor(props: IEditorProps) {
     super(props);

src/components/workspace/index.tsx

@@ -27,6 +27,12 @@ class Workspace extends React.Component<WorkspaceProps, {}> {
   private leftParentResizable: Resizable;
   private maxDividerHeight: number;
   private sideDividerDiv: HTMLDivElement;
+  private editorRef: React.RefObject<Editor>;
+
+  public constructor(props: WorkspaceProps) {
+    super(props);
+    this.editorRef = React.createRef();
+  }
 
   public componentDidMount() {
     this.maxDividerHeight = this.sideDividerDiv.clientHeight;
@@ -67,6 +73,7 @@ class Workspace extends React.Component<WorkspaceProps, {}> {
   private controlBarProps() {
     return {
       ...this.props.controlBarProps,
+      editorRef: this.editorRef,
       hasUnsavedChanges: this.props.hasUnsavedChanges
     };
   }
@@ -154,7 +161,13 @@ class Workspace extends React.Component<WorkspaceProps, {}> {
   private createWorkspaceInput = (props: WorkspaceProps) => {
     if (props.editorProps) {
       // Set key to force remount of Editor component when session id changes
-      return <Editor {...props.editorProps} key={props.editorProps.editorSessionId} />;
+      return (
+        <Editor
+          {...props.editorProps}
+          key={props.editorProps.editorSessionId}
+          ref={this.editorRef}
+        />
+      );
     } else {
       return <MCQChooser {...props.mcqProps!} />;
     }