Progress

Author: Ives van Hoorne

packages/app/package.json

@@ -151,6 +151,7 @@
     "monaco-vue": "^0.2.1",
     "normalize.css": "^5.0.0",
     "normalizr": "^3.2.3",
+    "ot": "^0.0.15",
     "phoenix": "^1.3.0",
     "postcss": "^6.0.9",
     "postcss-selector-parser": "^2.2.3",

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

@@ -1,5 +1,6 @@
 // @flow
 import * as React from 'react';
+import { TextOperation } from 'ot';
 import { debounce } from 'lodash';
 import { getModulePath } from 'common/sandbox/modules';
 
@@ -28,6 +29,25 @@ type State = {
   fuzzySearchEnabled: boolean,
 };
 
+function indexToLineAndColumn(lines, index) {
+  let offset = 0;
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    if (offset + line.length + 1 > index) {
+      return {
+        lineNumber: i + 1,
+        column: index - offset + 1,
+      };
+    }
+
+    // + 1 is for the linebreak character which is not included
+    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 };
+}
+
 let modelCache = {};
 
 const fontFamilies = (...families) =>
@@ -59,6 +79,7 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
   sizeProbeInterval: ?number;
   editor: any;
   monaco: any;
+  receivingCode: ?boolean = false;
 
   constructor(props: Props) {
     super(props);
@@ -203,6 +224,59 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
       },
     });
 
+    editor.onDidChangeModelContent(({ changes }) => {
+      const { isLive, sendTransforms, onCodeReceived } = this.props;
+
+      if (isLive && sendTransforms && !this.receivingCode) {
+        let code = this.currentModule.code || '';
+        const t = changes
+          .map(change => {
+            const startPos = change.range.getStartPosition();
+            const lines = code.split('\n');
+            let index = 0;
+            const totalLength = code.length;
+            let currentLine = 0;
+
+            while (currentLine + 1 < startPos.lineNumber) {
+              index += lines[currentLine].length;
+              index += 1; // Linebreak character
+              currentLine += 1;
+            }
+
+            index += startPos.column - 1;
+
+            const operation = new TextOperation();
+            if (index) {
+              operation.retain(index);
+            }
+
+            if (change.rangeLength > 0) {
+              // Deletion
+              operation.delete(change.rangeLength);
+
+              index += change.rangeLength;
+            }
+            if (change.text) {
+              // Insertion
+              operation.insert(change.text);
+            }
+
+            operation.retain(Math.max(0, totalLength - index));
+
+            if (changes.length > 1) {
+              code = operation.apply(code);
+            }
+
+            return operation;
+          })
+          .reduce((prev, next) => prev.compose(next));
+
+        sendTransforms(t);
+      } else if (onCodeReceived) {
+        onCodeReceived();
+      }
+    });
+
     if (this.props.onInitialized) {
       this.disposeInitializer = this.props.onInitialized(this);
     }
@@ -253,6 +327,10 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
     });
   };
 
+  setReceivingCode = (receiving: boolean) => {
+    this.receivingCode = receiving;
+  };
+
   setTSConfig = (config: Object) => {
     this.tsconfig = config;
 
@@ -321,9 +399,56 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
         this.currentModule.title,
         this.editor.getModel().getVersionId()
       );
+      this.lint(
+        code,
+        this.currentModule.title,
+        this.editor.getModel().getVersionId()
+      );
     }
   };
 
+  applyOperations = ops => {
+    const monacoEditOperations = [];
+
+    ops.forEach(operation => {
+      const lines = this.editor.getModel().getLinesContent();
+
+      let index = 0;
+      for (let i = 0; i < operation.ops.length; i++) {
+        let op = operation.ops[i];
+        if (TextOperation.isRetain(op)) {
+          index += op;
+        } else if (TextOperation.isInsert(op)) {
+          const { lineNumber, column } = indexToLineAndColumn(lines, index);
+          monacoEditOperations.push({
+            range: new this.monaco.Range(
+              lineNumber,
+              column,
+              lineNumber,
+              column
+            ),
+            text: op,
+          });
+          index += op.length;
+        } else if (TextOperation.isDelete(op)) {
+          const from = indexToLineAndColumn(lines, index);
+          const to = indexToLineAndColumn(lines, index - op);
+          monacoEditOperations.push({
+            range: new this.monaco.Range(
+              from.lineNumber,
+              from.column,
+              to.lineNumber,
+              to.column
+            ),
+            text: '',
+          });
+        }
+      }
+    });
+
+    this.editor.getModel().applyEdits(monacoEditOperations);
+  };
+
   changeDependencies = (
     dependencies: ?$PropertyType<Props, 'dependencies'>
   ) => {

packages/app/src/app/components/CodeEditor/types.js

@@ -38,6 +38,8 @@ export interface Editor {
   changeCode?: (code: string) => any;
   currentModule?: Module;
   setTSConfig?: (tsConfig: Object) => void;
+  setReceivingCode?: (receivingCode: boolean) => void;
+  applyOperations?: (operations: Array<any>) => void;
 }
 
 export type Props = {
@@ -56,4 +58,8 @@ export type Props = {
   highlightedLines?: Array<number>,
   tsconfig?: Object,
   readOnly?: boolean,
+  isLive: boolean,
+  sendTransforms?: (transform: any) => void,
+  receivingCode?: boolean,
+  onCodeReceived?: () => void,
 };

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

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { ThemeProvider } from 'styled-components';
 import { Prompt } from 'react-router-dom';
 import { reaction } from 'mobx';
+import { TextOperation } from 'ot';
 import { inject, observer } from 'mobx-react';
 import getTemplateDefinition from 'common/templates';
 import type { ModuleError } from 'common/types';
@@ -198,6 +199,31 @@ class EditorPreview extends React.Component<Props, State> {
         }
       }
     );
+    const disposeLiveHandler = reaction(
+      () => store.live.receivingCode,
+      () => {
+        if (editor.setReceivingCode) {
+          editor.setReceivingCode(store.live.receivingCode);
+        }
+      }
+    );
+
+    const disposeOperationsToApplyHandler = reaction(
+      () => store.editor.operationsToApply.map(x => x),
+      () => {
+        if (editor.applyOperations) {
+          editor.applyOperations(
+            store.editor.operationsToApply.map(TextOperation.fromJSON)
+          );
+
+          this.props.signals.live.onOperationsApplied();
+        } else {
+          console.log('not applying; setting code manually');
+          // TODO apply logic itself and call `editor.changeCode` manually
+        }
+      }
+    );
+    console.log(disposeOperationsToApplyHandler);
     const disposeModuleHandler = reaction(
       () => [store.editor.currentModule, store.editor.currentModule.code],
       ([newModule]) => {
@@ -235,6 +261,8 @@ class EditorPreview extends React.Component<Props, State> {
       disposeToggleDevtools();
       disposeResizeHandler();
       disposeGlyphsHandler();
+      disposeLiveHandler();
+      disposeOperationsToApplyHandler();
     };
   };
 
@@ -252,6 +280,15 @@ class EditorPreview extends React.Component<Props, State> {
     );
   };
 
+  sendTransforms = operation => {
+    const currentModuleShortid = this.props.store.editor.currentModuleShortid;
+
+    this.props.signals.live.onTransformMade({
+      moduleShortid: currentModuleShortid,
+      operation: operation.toJSON(),
+    });
+  };
+
   render() {
     const { signals, store } = this.props;
     const currentModule = store.editor.currentModule;
@@ -326,7 +363,13 @@ class EditorPreview extends React.Component<Props, State> {
               width={editorWidth}
               height={editorHeight}
               settings={settings(store)}
-              readOnly={store.live.isLive && !store.live.isCurrentEditor}
+              sendTransforms={this.sendTransforms}
+              readOnly={
+                false
+                //  (store.live.isLive && !store.live.isCurrentEditor)
+              }
+              isLive={store.live.isLive}
+              onCodeReceived={signals.live.onCodeReceived}
               onNpmDependencyAdded={name => {
                 if (sandbox.owned) {
                   signals.editor.addNpmDependency({ name, isDev: true });

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

@@ -0,0 +1,94 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+import RecordIcon from 'react-icons/lib/md/fiber-manual-record';
+
+const styles = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  outline: none;
+  border: none;
+  padding: 0.5rem;
+
+  background-color: #fd2439b8;
+
+  width: 100%;
+  color: white;
+  border-radius: 4px;
+  font-weight: 800;
+
+  border: 2px solid #fd2439b8;
+`;
+
+const Button = styled.button`
+  transition: 0.3s ease all;
+  ${styles};
+  cursor: pointer;
+
+  svg {
+    margin-right: 0.25rem;
+  }
+
+  &:hover {
+    background-color: #fd2439fa;
+  }
+`;
+
+const LoadingDiv = styled.div`
+  ${styles};
+`;
+
+const AnimatedRecordIcon = styled(RecordIcon)`
+  transition: 0.3s ease opacity;
+`;
+
+export default class LiveButton extends React.PureComponent {
+  state = {
+    hovering: false,
+    showIcon: true,
+  };
+
+  timer: ?number;
+
+  componentDidUpdate() {
+    if (this.state.hovering && !this.timer) {
+      this.timer = setInterval(() => {
+        this.setState({ showIcon: !this.state.showIcon });
+      }, 1000);
+    } else if (!this.state.hovering && this.timer) {
+      clearInterval(this.timer);
+      this.timer = null;
+
+      this.setState({ showIcon: true });
+    }
+  }
+
+  startHovering = () => {
+    this.setState({ hovering: true });
+  };
+
+  stopHovering = () => {
+    this.setState({ hovering: false });
+  };
+
+  render() {
+    const { onClick, isLoading } = this.props;
+
+    if (isLoading) {
+      return <LoadingDiv>Creating Session</LoadingDiv>;
+    }
+
+    return (
+      <Button
+        onMouseEnter={this.startHovering}
+        onMouseLeave={this.stopHovering}
+        onClick={onClick}
+      >
+        <AnimatedRecordIcon style={{ opacity: this.state.showIcon ? 1 : 0 }} />{' '}
+        Go Live
+      </Button>
+    );
+  }
+}