From df6f7a45233cf0241c0a7684067170bc76fe1056 Mon Sep 17 00:00:00 2001
From: sibiraj-s <dev.sibiraj@outlook.com>
Date: Sun, 27 Dec 2020 21:07:39 +0530
Subject: [PATCH] docs: add collab example

---
 docs/_sidebar.md |  1 +
 docs/collab.md   | 81 ++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 82 insertions(+)
 create mode 100644 docs/collab.md

diff --git a/docs/_sidebar.md b/docs/_sidebar.md
index c38a0240..bffb7fa9 100644
--- a/docs/_sidebar.md
+++ b/docs/_sidebar.md
@@ -17,3 +17,4 @@
   - [CodeMirror](codemirror.md)
   - [Reactive Forms](reactive-forms.md)
   - [Ng Model Binding](ng-model.md)
+  - [Collaborative Editing](collab.md)
diff --git a/docs/collab.md b/docs/collab.md
new file mode 100644
index 00000000..7fa2d448
--- /dev/null
+++ b/docs/collab.md
@@ -0,0 +1,81 @@
+# Collaborative Editing
+
+This example uses yjs to setup collaborative editing.
+
+The following example is from https://github.com/yjs/yjs-demos.
+
+See https://github.com/yjs for more details
+
+```ts
+import * as Y from 'yjs';
+import { WebsocketProvider } from 'y-websocket';
+import {
+  ySyncPlugin,
+  yCursorPlugin,
+  yUndoPlugin,
+  undo,
+  redo,
+} from 'y-prosemirror';
+import NgxEditorModule from 'ngx-editor';
+
+const ydoc = new Y.Doc();
+const provider = new WebsocketProvider(
+  'wss://prosemirror-collab.glitch.me/',
+  'prosemirror-demo',
+  ydoc
+);
+const type = ydoc.getXmlFragment('prosemirror');
+
+@NgModule({
+  imports: [
+    NgxEditorModule.forRoot({
+      plugins: [
+        ySyncPlugin(type),
+        yCursorPlugin(provider.awareness),
+        yUndoPlugin(),
+      ],
+    }),
+  ],
+})
+export class AppModule {}
+```
+
+### Server
+
+See https://glitch.com/edit/#!/prosemirror-collab
+
+```js
+const WebSocket = require('ws');
+const http = require('http');
+const StaticServer = require('node-static').Server;
+const setupWSConnection = require('y-websocket/bin/utils.js').setupWSConnection;
+
+const production = process.env.PRODUCTION != null;
+const port = process.env.PORT || 8080;
+
+const staticServer = new StaticServer('../', {
+  cache: production ? 3600 : false,
+  gzip: production,
+});
+
+const server = http.createServer((request, response) => {
+  request
+    .addListener('end', () => {
+      staticServer.serve(request, response);
+    })
+    .resume();
+});
+const wss = new WebSocket.Server({ server });
+
+wss.on('connection', (conn, req) =>
+  setupWSConnection(conn, req, {
+    gc: req.url.slice(1) !== 'prosemirror-versions',
+  })
+);
+
+server.listen(port);
+
+console.log(
+  `Listening to http://localhost:${port} ${production ? '(production)' : ''}`
+);
+```