WIP: Collab 2

.eslintrc

@@ -6,7 +6,7 @@
     "codeFrame": true,
     "ecmaFeatures": {
       "jsx": true
-    },
+    }
   },
   "plugins": ["react"],
   "rules": {
@@ -25,9 +25,10 @@
     "prefer-const": "error",
     "quotes": [2, "single", { "avoidEscape": true }],
     "semi": [2, "always"],
-    "strict": 0,
+    "strict": 0
   },
   "globals": {
+    "__dirname": false,
     "$ReadOnlyArray": false,
     "Blob": false,
     "Class": false,
@@ -49,6 +50,9 @@
     "clearTimeout": false,
     "console": false,
     "document": false,
+    "module": false,
+    "process": false,
+    "require": false,
     "requestAnimationFrame": false,
     "setTimeout": false,
     "window": false

.eslintrc.js

@@ -28,6 +28,7 @@ module.exports = {
     "strict": 0,
   },
   "globals": {
+    "__dirname": false,
     "$ReadOnlyArray": false,
     "Blob": false,
     "Class": false,
@@ -49,6 +50,9 @@ module.exports = {
     "clearTimeout": false,
     "console": false,
     "document": false,
+    "module": false,
+    "process": false,
+    "require": false,
     "requestAnimationFrame": false,
     "setTimeout": false,
     "window": false

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 bin
 node_modules
+servers
 *.pyc
 *.code-workspace
 .vscode/

build_bin.py

@@ -58,7 +58,7 @@ def main():
   print '-' * 80
   os.system('killall -9 node')
   os.system('rm -fr bin')
-  os.system('NODE_ENV=production npm run build_bin')
+  os.system('NODE_ENV=production node utils/build_bin.js')
 
   # ls # BUG: os.system('cp web_app/web_runtime.bundle.js bin/web_runtime.js')
 

demo/ConvertApp.js → demo/client/ConvertApp.js

@@ -5,12 +5,12 @@ import {EditorState} from 'prosemirror-state';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import convertFromHTML from '../src/convertFromHTML';
-import convertFromJSON from '../src/convertFromJSON';
-import convertToJSON from '../src/convertToJSON';
-import createEmptyEditorState from '../src/createEmptyEditorState';
-import CustomButton from '../src/ui/CustomButton';
-import RichTextEditor from '../src/ui/RichTextEditor';
+import convertFromHTML from '../../src/convertFromHTML';
+import convertFromJSON from '../../src/convertFromJSON';
+import convertToJSON from '../../src/convertToJSON';
+import createEmptyEditorState from '../../src/createEmptyEditorState';
+import CustomButton from '../../src/ui/CustomButton';
+import RichTextEditor from '../../src/ui/RichTextEditor';
 
 import './convert-app.css';
 

demo/client/DemoApp.js

@@ -0,0 +1,80 @@
+// @flow
+
+import applyDevTools from 'prosemirror-dev-tools';
+import {EditorState} from 'prosemirror-state';
+import {Transform} from 'prosemirror-transform';
+import {EditorView} from 'prosemirror-view';
+import React from 'react';
+
+import createEmptyEditorState from '../../src/createEmptyEditorState';
+import RichTextEditor from '../../src/ui/RichTextEditor';
+import uuid from '../../src/uuid';
+import DemoAppRuntime from './DemoAppRuntime';
+import DemoCollabConnector from './DemoCollabConnector';
+import DemoSimpleConnector from './DemoSimpleConnector';
+import createDemoTemplateEditorState from './createDemoTemplateEditorState';
+
+import './demo-app.css';
+
+// If load from localhost, assumes collab-edit is enabled.
+const COLLAB_EDITING = /^https?:\/\/localhost:\d+/.test(window.location.href) || 1;
+
+class DemoApp extends React.PureComponent<any, any, any> {
+  _runtime: any;
+  _connector: any;
+  _clientID: string;
+
+  constructor(props: any, context: any) {
+    super(props, context);
+
+    this._runtime = new DemoAppRuntime();
+    this._clientID = uuid();
+
+    const docID = 1;
+
+    const editorState = COLLAB_EDITING ?
+      createEmptyEditorState() :
+      createDemoTemplateEditorState();
+
+    const setState = this.setState.bind(this);
+    this._connector = COLLAB_EDITING ?
+      new DemoCollabConnector(editorState, setState, {docID}) :
+      new DemoSimpleConnector(editorState, setState);
+
+    this.state = {
+      editorState,
+    };
+  }
+
+  render(): React.Element<any> {
+    const {editorState} = this.state;
+    const readOnly = /read/ig.test(window.location.search);
+    return (
+      <RichTextEditor
+        editorState={editorState}
+        embedded={false}
+        height="100vh"
+        onChange={this._onChange}
+        onReady={this._onReady}
+        placeholder={readOnly ? '' : 'Type Something...'}
+        readOnly={readOnly}
+        runtime={this._runtime}
+        width="100vw"
+      />
+    );
+  }
+
+  _onChange = (data: {state: EditorState, transaction: Transform}): void => {
+    const {transaction} = data;
+    this._connector.onEdit(transaction);
+  };
+
+  _onReady = (editorView: EditorView): void => {
+    window.debugProseMirror = () => {
+      applyDevTools(editorView);
+    };
+    window.debugProseMirror();
+  };
+}
+
+export default DemoApp;

demo/DemoAppRuntime.js → demo/client/DemoAppRuntime.js

@@ -2,7 +2,7 @@
 
 // This implements the interface of `EditorRuntime`.
 
-import type {ImageLike} from '../src/Types';
+import type {ImageLike} from '../../src/Types';
 
 class DemoAppRuntime {
 

demo/client/DemoCollabConnector.js

@@ -0,0 +1,72 @@
+// @flow
+
+import {EditorState} from 'prosemirror-state';
+import {Transform} from 'prosemirror-transform';
+import ReactDOM from 'react-dom';
+
+import EditorConnection from './EditorConnection';
+import Reporter from './Reporter';
+
+type IdStrict = number;
+
+type ReactSetStateCall = (
+  state: {editorState: EditorState},
+  callback: Function,
+) => void;
+
+
+class DemoCollabConnector {
+  _clientID: string;
+  _connected: boolean;
+  _connection: any;
+  _docID: IdStrict;
+  _editorState: EditorState;
+  _setState: ReactSetStateCall;
+  _stepKeys: Object;
+
+  constructor(
+    editorState: EditorState,
+    setState: ReactSetStateCall,
+    config: {
+      docID: IdStrict,
+    },
+  ) {
+    const {docID} = config;
+    this._editorState = editorState;
+    this._setState = setState;
+    this._docID = docID;
+
+    const url = window.location.protocol + '\/\/' +
+      window.location.host.replace('3001', '3002') + '/docs/' +
+      docID;
+
+    const herokuUrl =
+       window.location.protocol +
+      '//boiling-beach-99050.herokuapp.com/docs/' + docID;
+
+    this._connection = new EditorConnection(
+      setState,
+      new Reporter(),
+      herokuUrl || url,
+    );
+
+    this._connection.view = {
+      updateState: (s) => {
+        console.log('update', s);
+        setState({editorState: s}, () => {});
+      },
+    };
+  }
+
+  onEdit = (transaction: Transform): void => {
+    if (!this._connection.ready) {
+      console.warn('not ready');
+      return;
+    }
+    ReactDOM.unstable_batchedUpdates(() => {
+      this._connection.dispatch({type: 'transaction', transaction});
+    });
+  };
+}
+
+export default DemoCollabConnector;

demo/client/DemoSimpleConnector.js

@@ -0,0 +1,35 @@
+// @flow
+
+import {EditorState} from 'prosemirror-state';
+import {Transform} from 'prosemirror-transform';
+import ReactDOM from 'react-dom';
+
+type SetStateCall = (
+  state: {editorState: EditorState},
+  callback: Function,
+) => void;
+
+class DemoSimpleConnector {
+
+  _setState: SetStateCall;
+  _editorState: EditorState;
+
+  constructor(editorState: EditorState, setState: SetStateCall) {
+    this._editorState = editorState;
+    this._setState = setState;
+  }
+
+  onEdit = (transaction: Transform): void => {
+    ReactDOM.unstable_batchedUpdates(() => {
+      const editorState = this._editorState.apply(transaction);
+      const state = {
+        editorState,
+      };
+      this._setState(state, () => {
+        this._editorState = editorState;
+      });
+    });
+  };
+}
+
+export default DemoSimpleConnector;