Nice

Author: Ives van Hoorne

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

@@ -228,52 +228,7 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
       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();
+        this.addChangesOperation(changes);
       }
     });
 
@@ -364,6 +319,82 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
     });
   };
 
+  changes = { code: '', changes: [] };
+  changeTimeout: ?TimeoutID;
+  /**
+   * Throttle the changes and handle them after a desired amount of time as one array of changes
+   */
+  addChangesOperation = (changes: Array<any>) => {
+    if (!this.changes.code) {
+      this.changes.code = this.currentModule.code || '';
+    }
+
+    changes.forEach(change => {
+      this.changes.changes.push(change);
+    });
+
+    if (this.changeTimeout) {
+      clearTimeout(this.changeTimeout);
+    }
+    this.changeTimeout = setTimeout(() => {
+      this.sendChangeOperations();
+    }, 10);
+  };
+
+  sendChangeOperations = () => {
+    const { sendTransforms, isLive, onCodeReceived } = this.props;
+
+    if (sendTransforms && this.changes.changes) {
+      let code = this.changes.code;
+      const t = this.changes.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 (this.changes.changes.length > 1) {
+            code = operation.apply(code);
+          }
+
+          return operation;
+        })
+        .reduce((prev, next) => prev.compose(next));
+
+      sendTransforms(t);
+    } else if (!isLive && onCodeReceived) {
+      onCodeReceived();
+    }
+    this.changes = { code: '', changes: [] };
+  };
+
   changeSandbox = (
     newSandbox: Sandbox,
     newCurrentModule: Module,
@@ -407,46 +438,46 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
     }
   };
 
-  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({
+  applyOperation = (operation: any) => {
+    let index = 0;
+    for (let i = 0; i < operation.ops.length; i++) {
+      const op = operation.ops[i];
+      if (TextOperation.isRetain(op)) {
+        index += op;
+      } else if (TextOperation.isInsert(op)) {
+        const { lineNumber, column } = indexToLineAndColumn(
+          this.editor.getModel().getLinesContent(),
+          index
+        );
+        this.editor.getModel().applyEdits([
+          {
             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({
+          },
+        ]);
+        index += op.length;
+      } else if (TextOperation.isDelete(op)) {
+        const lines = this.editor.getModel().getLinesContent();
+        const from = indexToLineAndColumn(lines, index);
+        const to = indexToLineAndColumn(lines, index - op);
+        this.editor.getModel().applyEdits([
+          {
             range: new this.monaco.Range(
               from.lineNumber,
               from.column,
               to.lineNumber,
               to.column
             ),
             text: '',
-          });
-        }
+          },
+        ]);
       }
-    });
-
-    this.editor.getModel().applyEdits(monacoEditOperations);
+    }
   };
 
   changeDependencies = (
@@ -770,6 +801,9 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
         // the old extraLib definition and defining a new one.
         modelCache[currentId].lib.dispose();
         modelCache[currentId].lib = this.addLib(currentModule.code || '', path);
+
+        // Reset changes
+        this.changes = { code: '', changes: [] };
       }
     }
 

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

@@ -39,7 +39,7 @@ export interface Editor {
   currentModule?: Module;
   setTSConfig?: (tsConfig: Object) => void;
   setReceivingCode?: (receivingCode: boolean) => void;
-  applyOperations?: (operations: Array<any>) => void;
+  applyOperation?: (operation: any) => void;
 }
 
 export type Props = {

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

@@ -208,22 +208,26 @@ class EditorPreview extends React.Component<Props, State> {
       }
     );
 
-    const disposeOperationsToApplyHandler = reaction(
-      () => store.editor.operationsToApply.map(x => x),
+    const disposePendingOperationHandler = reaction(
+      () =>
+        store.editor.pendingOperation &&
+        store.editor.pendingOperation.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
+        if (store.editor.pendingOperation) {
+          if (editor.applyOperation) {
+            editor.applyOperation(
+              TextOperation.fromJSON(store.editor.pendingOperation)
+            );
+
+            this.props.signals.live.onOperationApplied();
+          } 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]) => {
@@ -262,7 +266,7 @@ class EditorPreview extends React.Component<Props, State> {
       disposeResizeHandler();
       disposeGlyphsHandler();
       disposeLiveHandler();
-      disposeOperationsToApplyHandler();
+      disposePendingOperationHandler();
     };
   };
 

packages/app/src/app/store/modules/editor/index.js

@@ -30,7 +30,7 @@ export default Module({
     errors: [],
     glyphs: [],
     corrections: [],
-    operationsToApply: [],
+    pendingOperation: null,
     isInProjectView: false,
     forceRender: 0,
     initialPath: '/',

packages/app/src/app/store/modules/editor/model.js

@@ -97,7 +97,7 @@ export default {
   error: types.maybe(types.string),
   isResizing: types.boolean,
   changedModuleShortids: types.array(types.string),
-  operationsToApply: types.array(
+  pendingOperation: types.maybe(
     types.array(types.union(types.string, types.number))
   ),
   tabs: types.array(

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

@@ -220,3 +220,17 @@ export function acknowledgeOperation({ props, ot }) {
 
   ot.serverAck(moduleShortid);
 }
+
+export function computePendingOperation({ props, state }) {
+  const existingPendingOperation = state.get('editor.pendingOperation');
+
+  if (!existingPendingOperation) {
+    return { pendingOperation: props.operation };
+  }
+
+  const newPendingOperation = TextOperation.fromJSON(existingPendingOperation)
+    .compose(TextOperation.fromJSON(props.operation))
+    .toJSON();
+
+  return { pendingOperation: newPendingOperation };
+}

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

@@ -22,6 +22,6 @@ export default Module({
     onTransformMade: sequences.sendTransform,
     applyTransformation: sequences.applyTransformation,
     onCodeReceived: sequences.unSetReceivingStatus,
-    onOperationsApplied: sequences.onOperationsApplied,
+    onOperationApplied: sequences.clearPendingOperation,
   },
 });

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

@@ -169,10 +169,17 @@ export const applyTransformation = [
     (s1, s2) => s1 === s2
   ),
   {
-    true: [push(state`editor.operationsToApply`, props`operation`)],
+    true: [
+      actions.computePendingOperation,
+      set(state`editor.pendingOperation`, props`pendingOperation`),
+    ],
     false: [actions.applyTransformation, changeCode],
   },
   actions.unSetReceivingStatus,
 ];
 
 export const unSetReceivingStatus = [actions.unSetReceivingStatus];
+
+export const clearPendingOperation = [
+  set(state`editor.pendingOperation`, null),
+];