very basic collaborative editing

Author: macovedj

assets/.babelrc

@@ -1,5 +1,6 @@
 {
     "presets": [
-        "@babel/preset-env"
+        "@babel/preset-env",
+        "@babel/preset-react"
     ]
 }

assets/js/app.js

@@ -13,3 +13,27 @@ import "../css/app.scss"
 //     import socket from "./socket"
 //
 import "phoenix_html"
+
+import renderCollaborator from "./collaborator"
+
+window.onerror = function (msg, url, lineNo, columnNo, error) {
+    fetch("/api/reporterror", {
+        method: "POST",
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            name: error.name,
+            message: error.message,
+            stack: error.stack,
+        }),
+    })
+
+    return false;
+}
+
+const collaborator = document.getElementById("collaborator");
+if (collaborator) {
+    renderCollaborator(collaborator);
+}

assets/js/char.ts

@@ -0,0 +1,111 @@
+import * as Decimal from "./decimal";
+import * as Identifier from "./identifier";
+
+import { cons, head, rest } from "./utils";
+
+export interface t {
+    position: Identifier.t[];
+    lamport: number;
+    value: string;
+}
+
+export type Serial = [Array<[number, number]>, number, string];
+
+export function create(position: Identifier.t[], lamport: number, value: string) {
+    const obj = { position, lamport, value };
+    Object.freeze(obj);
+    return obj;
+}
+
+export function startOfFile(): t {
+    // Note that the digit is 1, not 0. We don't want the min to be 0
+    // because we don't want the last digit to be 0, since fractions
+    // would have multiple representations (e.g. 0.1 === 0.10) which
+    // would be bad.
+    return create([Identifier.create(1, 0)], 0, "^");
+}
+
+export function endOfFile(): t {
+    return create([Identifier.create(255, 0)], 0, "$");
+}
+
+export function ofArray(array: Serial): t {
+    return create(array[0].map(Identifier.ofArray), array[1], array[2]);
+}
+
+export function toArray(obj: t): Serial {
+    const position = obj.position.map(Identifier.toArray);
+    return [position, obj.lamport, obj.value];
+}
+
+export function comparePosition(p1: Identifier.t[], p2: Identifier.t[]): number {
+    for (let i = 0; i < Math.min(p1.length, p2.length); i++) {
+        const comp = Identifier.compare(p1[i], p2[i]);
+        if (comp !== 0) {
+            return comp;
+        }
+    }
+    if (p1.length < p2.length) {
+        return - 1;
+    } else if (p1.length > p2.length) {
+        return 1;
+    } else {
+        return 0;
+    }
+}
+
+export function compare(c1: t, c2: t): number {
+    return comparePosition(c1.position, c2.position);
+}
+
+// Generate a position between p1 and p2. The generated position will be heavily
+// biased to lean towards the left since character insertions tend to happen on
+// the right side.
+export function generatePositionBetween(position1: Identifier.t[],
+                                        position2: Identifier.t[],
+                                        site: number): Identifier.t[] {
+    // Get either the head of the position, or fallback to default value
+    const head1 = head(position1) || Identifier.create(0, site);
+    console.log("created head1")
+    const head2 = head(position2) || Identifier.create(Decimal.BASE, site);
+    console.log("created head2")
+
+    if (head1.digit !== head2.digit) {
+        // Case 1: Head digits are different
+        // It's easy to create a position to insert in-between by doing regular arithmetics.
+        const n1 = Decimal.fromIdentifierList(position1);
+        console.log("created n1")
+        const n2 = Decimal.fromIdentifierList(position2);
+        console.log("created n2")
+        const delta = Decimal.subtractGreaterThan(n2, n1);
+        console.log("created delta")
+
+        // Increment n1 by some amount less than delta
+        const next = Decimal.increment(n1, delta);
+        console.log('incremented')
+        return Decimal.toIdentifierList(next, position1, position2, site);
+    } else {
+        if (head1.site < head2.site) {
+            // Case 2: Head digits are the same, sites are different
+            // Since the site acts as a tie breaker, it will always be the case that
+            // cons(head1, anything) < position2
+            return cons(head1, generatePositionBetween(rest(position1), [], site));
+        } else if (head1.site === head2.site) {
+            // Case 3: Head digits and sites are the same
+            // Need to recurse on the next digits
+            return cons(head1, generatePositionBetween(rest(position1), rest(position2), site));
+        } else {
+            throw new Error("invalid site ordering");
+        }
+    }
+}
+
+export function equals(c1: t, c2: t): boolean {
+    if (c1.position.length !== c2.position.length) return false;
+    if (c1.lamport !== c2.lamport) return false;
+    if (c1.value !== c2.value) return false;
+    for (let i = 0; i < c1.position.length; i++) {
+        if (!Identifier.equals(c1.position[i], c2.position[i])) return false;
+    }
+    return true;
+}

assets/js/collaborator.tsx

@@ -0,0 +1,87 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+
+import Editor from "./editor"
+import { EditorSocket, UserPresence } from "./editor_socket"
+
+// Yes, React is overkill right now
+class Collaborator extends React.Component<any, any> {
+    editor: Editor
+
+    state = {
+        presences: [],
+        exceededLimit: false,
+        disconnected: false
+    };
+
+    presenceCallback = (presences: UserPresence[]) => {
+        this.setState({ presences: [...presences] });
+        this.editor.updateCursors(presences);
+    }
+
+    disconnectCallback = () => {
+        this.setState({ disconnected: true })
+    }
+
+    limitCallback = (exceeded: boolean) => {
+        this.setState({ exceededLimit: exceeded });
+    }
+
+    componentDidMount() {
+        const url = window.location.pathname;
+        const documentId = url.substring(url.lastIndexOf('/') + 1);
+        const editorSocket = new EditorSocket(
+            documentId, this.presenceCallback, this.disconnectCallback
+        );
+        const textarea = ReactDOM.findDOMNode(this).getElementsByTagName("textarea").item(0);
+        this.editor = new Editor(textarea, editorSocket, this.limitCallback);
+    }
+
+    render() {
+        const users: Map<number, UserPresence> = new Map();
+        this.state.presences.forEach((presence: UserPresence) => {
+            users.set(presence.userId, presence);
+        });
+        const indicators = Array.from(users).map(([userId, presence]: [number, UserPresence]) =>
+            <div key={userId} className="user">
+                <div className="circle" style={{background: presence.color}}></div>
+                <div className="username">{ presence.username }</div>
+            </div>
+        );
+        return (
+            <div className="page">
+                <header className="header">
+                    <div className="nav-left indicators">
+                        { indicators }
+                    </div>
+                    <div className="nav-right">
+                        <a href="/">back to main</a>
+                    </div>
+                </header>
+                <div className="container">
+                    { this.state.disconnected &&
+                        <div className="warning">
+                            <p>Disconnected due to connection error - please refresh</p>
+                        </div>
+                    }
+                    { this.state.exceededLimit &&
+                        <div className="warning">
+                            <p>Operation cancelled: Exceeded the 2500 character limit of this document</p>
+                            <p>I know you'd like to stress test this application but my server is pretty small! Please run tests on your own machine instead and let me know what you find!</p>
+                        </div>
+                    }
+                    <div className="code-container">
+                        <textarea />
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default function renderCollaborator(domNode) {
+    ReactDOM.render(
+        <Collaborator/>,
+        domNode
+    );
+}

assets/js/crdt.ts

@@ -0,0 +1,85 @@
+import CodeMirror from "codemirror";
+
+import { AATree } from "augmented-aa-tree";
+
+import * as Char from "./char";
+
+export type RemoteChange = ["add" | "remove", Char.t];
+
+export namespace RemoteChange {
+    export function add(char: Char.t): RemoteChange {
+        return ["add", char];
+    }
+    export function remove(char: Char.t): RemoteChange {
+        return ["remove", char];
+    }
+}
+
+export interface LocalChange {
+    from: CodeMirror.Position;
+    to: CodeMirror.Position;
+    text: string;
+}
+
+export namespace LocalChange {
+    export function create(from: CodeMirror.Position, to: CodeMirror.Position, text: string): LocalChange {
+        const obj = { from, to, text };
+        Object.freeze(obj);
+        return obj;
+    }
+}
+
+export interface Crdt {
+    init(init: Char.Serial[]);
+    toString(): string;
+    remoteInsert(char: Char.t): LocalChange | null;
+    remoteDelete(char: Char.t): LocalChange | null;
+
+    // Returns inserted characters
+    localInsert(lamport: number, site: number, change: LocalChange): Char.t[];
+
+    // Returns deleted characters
+    localDelete(change: LocalChange): Char.t[];
+}
+
+export function updateAndConvertLocalToRemote(crdt: Crdt,
+                                              lamport: number,
+                                              site: number,
+                                              change: CodeMirror.EditorChange): RemoteChange[] {
+    if (change.from.line > change.to.line ||
+        (change.from.line === change.to.line && change.from.ch > change.to.ch)) {
+        throw new Error("got inverted inverted from/to");
+    }
+
+    switch (change.origin) {
+        case "+delete":
+            const deleteChange = LocalChange.create(change.from, change.to, "");
+            return crdt.localDelete(deleteChange).map(RemoteChange.remove);
+        case "+input":
+        case "paste":
+            // Pure insertions have change.removed = [""]
+            let removeChanges: RemoteChange[] = [];
+            if (!(change.removed.length === 1 && change.removed[0] === "")) {
+                const deletion = LocalChange.create(change.from, change.to, "");
+                removeChanges = crdt.localDelete(deletion).map(RemoteChange.remove);
+            }
+            // All strings expect the last one represent the insertion of a new line
+            const insert = LocalChange.create(change.from, change.to, change.text.join("\n"));
+            const insertChanges = crdt.localInsert(lamport, site, insert).map(RemoteChange.add);
+            return removeChanges.concat(insertChanges);
+        default:
+            throw new Error("Unknown change origin " + change.origin);
+    }
+}
+
+export function updateAndConvertRemoteToLocal(crdt: Crdt, change: RemoteChange): LocalChange | null {
+    const char = change[1];
+    switch (change[0]) {
+        case "add":
+            return crdt.remoteInsert(char);
+        case "remove":
+            return crdt.remoteDelete(char);
+        default: throw new Error("unknown remote change");
+        // default: const _exhaustiveCheck: never = "never";
+    }
+}