demo collaborative text editor with yjs

pyshx · pyshx · commit 0088e952aac7 · 2021-05-28T18:43:00.000+01:00
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Piyush Chauhan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/Public/index.html b/Public/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Text-Editor</title>
+</head>
+<body>
+    <textarea style="width: 100%; height: 500px;" id="textfield"></textarea>
+    <script src="js/app.js"></script>
+</body>
+</html>
diff --git a/README.md b/README.md
@@ -0,0 +1,41 @@
+# Shared editing demo using IPFS and CRDT
+
+> This codebase was developed to demostrate how to use IPFS in conjuction with [Y.js, a CRDT library](http://y-js.org/).
+
+## Set up
+
+### Pre-requisites
+
+-  Have Node.js version 6 or greater installed
+
+### Install
+
+```
+> git clone https://github.com/ipfs-labs/shared-editing-demo.git
+> cd shared-editing-demo
+> npm install
+```
+
+### Build
+
+```
+> npm run build
+```
+
+### Run
+## Reference
+
+Followed this video by IPFS[https://www.youtube.com/watch?v=-kdx8rJd8rQ](Youtube IPFS).
+
+### Open in browser
+
+Using a modern browser that supports WebRTC, like a recent version of Chrome or Firefox, open several windows of [http://localhost:12345](http://localhost:12345).
+
+## Known issues
+
+This Demo uses WebRTC to establish the connections between nodes. WebRTC is a CPU intensive protocol and not all Browsers will behave correctly, depending on their implementation of WebRTC or the resources available on the machine that they are running. This is a known issue and something the [js-ipfs team is looking at alternatives to solve](https://github.com/ipfs/js-ipfs/issues/962).
+
+
+## License
+
+MIT
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "ipfs-text-editor",
+  "version": "0.0.1",
+  "description": "Yjs with IPFS",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "http-server -c-1 -p 78945 public"
+  },
+  "author": "Piyush Chauhan <piyush@pysh.me>",
+  "license": "MIT",
+  "dependencies": {
+    "browserify": "^14.4.0",
+    "http-server": "^0.10.0",
+    "ipfs": "^0.25.2",
+    "y-array": "^10.1.4",
+    "y-ipfs-connector": "^1.2.1",
+    "y-memory": "^8.0.9",
+    "y-text": "^9.5.1",
+    "yjs": "^12.3.3"
+  }
+}
diff --git a/src/app.js b/src/app.js
@@ -0,0 +1,39 @@
+const IPFS = require('ipfs')
+const Y = require('yjs')
+require('y-memory')(Y)
+require('y-array')(Y)
+require('y-text')(Y)
+require('y-ipfs-connector')(Y)
+
+function repo () {
+  return 'ipfs/yjs-demo/' + Math.random()
+}
+
+const ipfs = new IPFS({
+  repo: repo(),
+  EXPERIMENTAL: {
+    pubsub: true
+  }
+})
+
+ipfs.once('ready', () => ipfs.id((err, info) => {
+  if (err) { throw err }
+
+  console.log('IPFS node ready with address ' + info.id)
+
+  Y({
+    db: {
+      name: 'memory'
+    },
+    connector: {
+      name: 'ipfs',
+      room: 'ipfs-yjs-demo',
+      ipfs: ipfs
+    },
+    share: {
+      textfield: 'Text'
+    }
+  }).then((y) => {
+    y.share.textfield.bind(document.getElementById('textfield'))
+  })
+}))
