Latest live

Author: Ives van Hoorne

packages/app/src/app/components/CodeEditor/Monaco/index.js

@@ -45,8 +45,11 @@ function indexToLineAndColumn(lines, index) {
     offset += line.length + 1;
   }
 
-  // +2 for column, because +1 for Monaco and +1 for linebreak
-  return { lineNumber: lines.length, column: lines[lines.length - 1] + 2 };
+  // +2 for column (length is already a +1), because +1 for Monaco and +1 for linebreak
+  return {
+    lineNumber: lines.length,
+    column: (lines[lines.length - 1] || '').length + 1,
+  };
 }
 
 const fadeIn = css.keyframes('fadeIn', {
@@ -291,7 +294,7 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
       const { onSelectionChanged, isLive } = this.props;
       // Reason 3 is update by mouse or arrow keys
       if (isLive) {
-        const lines = editor.getModel().getLinesContent();
+        const lines = editor.getModel().getLinesContent() || [];
         const data = {
           primary: getSelection(lines, selectionChange.selection),
           secondary: selectionChange.secondarySelections.map(s =>
@@ -515,7 +518,7 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
         }
     >
   ) => {
-    const lines = this.editor.getModel().getLinesContent();
+    const lines = this.editor.getModel().getLinesContent() || [];
 
     userSelections.forEach(data => {
       const { userId } = data;
@@ -730,7 +733,7 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
         index += op;
       } else if (TextOperation.isInsert(op)) {
         const { lineNumber, column } = indexToLineAndColumn(
-          this.editor.getModel().getLinesContent(),
+          this.editor.getModel().getLinesContent() || [],
           index
         );
         this.editor.getModel().applyEdits([
@@ -747,7 +750,7 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
         ]);
         index += op.length;
       } else if (TextOperation.isDelete(op)) {
-        const lines = this.editor.getModel().getLinesContent();
+        const lines = this.editor.getModel().getLinesContent() || [];
         const from = indexToLineAndColumn(lines, index);
         const to = indexToLineAndColumn(lines, index - op);
         this.editor.getModel().applyEdits([
@@ -1098,9 +1101,9 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
 
   updateCode(code: string = '') {
     const pos = this.editor.getPosition();
-    const lines = this.editor.getModel().getLinesContent();
+    const lines = this.editor.getModel().getLinesContent() || [];
     const lastLine = lines.length;
-    const lastLineColumn = lines[lines.length - 1].length;
+    const lastLineColumn = (lines[lines.length - 1] || '').length;
     const editOperation = {
       identifier: {
         major: 1,

packages/app/src/app/pages/Sandbox/Editor/Content/index.js

@@ -396,7 +396,7 @@ class EditorPreview extends React.Component<Props, State> {
               height={editorHeight}
               settings={settings(store)}
               sendTransforms={this.sendTransforms}
-              readOnly={!store.live.isCurrentEditor}
+              readOnly={!store.live.isCurrentEditor || store.live.reconnecting}
               isLive={store.live.isLive}
               onCodeReceived={signals.live.onCodeReceived}
               onSelectionChanged={signals.live.onSelectionChanged}

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo.js

@@ -124,6 +124,7 @@ class LiveInfo extends React.Component {
       addEditor,
       removeEditor,
       currentUserId,
+      reconnecting,
     } = this.props;
 
     const owner = roomInfo.users.find(u => u.id === ownerId);
@@ -145,7 +146,13 @@ class LiveInfo extends React.Component {
       <Container>
         <Title>
           <div style={{ flex: 1, display: 'flex', alignItems: 'center' }}>
-            <RecordIcon /> {isOwner ? "You've gone live!" : 'You are live!'}
+            {reconnecting ? (
+              'Reconnecting...'
+            ) : (
+              <React.Fragment>
+                <RecordIcon /> {isOwner ? "You've gone live!" : 'You are live!'}
+              </React.Fragment>
+            )}
           </div>
           <div>
             {roomInfo.startTime != null && (

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/index.js

@@ -21,6 +21,7 @@ const Live = ({ signals, store }) => (
         roomInfo={store.live.roomInfo}
         ownerId={store.editor.currentSandbox.author.id}
         currentUserId={store.user.id}
+        reconnecting={store.live.reconnecting}
       />
     ) : (
       <React.Fragment>

packages/app/src/app/store/modules/live/actions.js

@@ -107,17 +107,20 @@ export function consumeState({ props, ot }) {
     roomInfo,
   } = props.data;
 
-  ot.consumeData(otData);
-
   return {
     sandbox,
     changedModuleShortids,
     tabs,
     currentModuleShortid,
     roomInfo,
+    otData,
   };
 }
 
+export function consumeOTData({ props, ot }) {
+  ot.consumeData(props.otData);
+}
+
 export function sendSelection({ props, state, live }) {
   const userId = state.get('user.id');
   const moduleShortid = props.moduleShortid;

packages/app/src/app/store/modules/live/sequences.js

@@ -101,6 +101,7 @@ export const handleMessage = [
           equals(state`live.isLoading`),
           {
             true: [
+              actions.consumeOTData,
               set(state`editor.sandboxes.${props`sandbox.id`}`, props`sandbox`),
               setSandbox,
               set(state`editor.tabs`, props`tabs`),