add dat example

yjs · Apr 26, 2020 · 4941ea5 · 4941ea5
1 parent c4b9785
commit 4941ea5
Show file tree

Hide file tree

Showing 12 changed files with 9,121 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -8,6 +8,8 @@
 * Shared Editing using the [ProseMirror](http://prosemirror.net/) editor with
   versioning support - [Live
   Demo](https://demos.yjs.dev/prosemirror-versions/prosemirror-versions.html)
+* Shared Editing using the [Dat Protocol](https://dat.foundation/) - [Live
+  Demo](https://demos.yjs.dev/prosemirror-dat/prosemirror-dat.html)
 * Shared Editing using the [Quill](https://quilljs.com/) editor - [Live
   Demo](https://demos.yjs.dev/quill/quill.html)
 * Shared Editing using the

diff --git a/index.html b/index.html
@@ -9,6 +9,9 @@ <h1>Yjs Demos</h1>
     <li><a href="./prosemirror-versions/prosemirror-versions.html">
       ProseMirror Binding with Version History
     </a></li>
+    <li><a href="./prosemirror-dat/prosemirror-dat.html">
+      Yjs + Dat Protocol Demo (with offline support and p2p sync using Dat)
+    </a></li>
     <li><a href="./atlaskit/atlaskit.html">ProseMirror-Atlaskit Binding</a></li>
     <li><a href="./quill/quill.html">Quill Binding</a></li>
     <li><a href="./monaco/monaco.html">Monaco Binding</a></li>

diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "node-static": "^0.7.11",
     "prosemirror-demo": "./prosemirror",
     "prosemirror-versions-demo": "./prosemirror-versions",
+    "prosemirror-dat-demo": "./prosemirror-dat",
     "quill-demo": "./quill",
     "serve": "^11.2.0",
     "standard": "^12.0.1",

diff --git a/prosemirror-dat/package-lock.json b/prosemirror-dat/package-lock.json
diff --git a/prosemirror-dat/package.json b/prosemirror-dat/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "yjs-demos-prosemirror-dat",
+  "version": "1.0.0",
+  "description": "Yjs ProseMirror editor binding demo",
+  "main": "index.js",
+  "scripts": {
+    "dist": "webpack --mode=production",
+    "start": "webpack-dev-server --open-page prosemirror.html",
+    "postinstall": "npm run dist"
+  },
+  "author": "Kevin Jahns <kevin.jahns@pm.me>",
+  "license": "UNLICENSE",
+  "dependencies": {
+    "prosemirror-example-setup": "^1.1.2",
+    "prosemirror-model": "^1.9.1",
+    "prosemirror-state": "^1.3.3",
+    "prosemirror-view": "^1.14.6",
+    "serve": "^11.2.0",
+    "webpack": "^4.42.1",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3",
+    "y-dat": "0.0.1",
+    "y-prosemirror": "^0.3.3",
+    "yjs": "^13.0.0"
+  }
+}
diff --git a/prosemirror-dat/prosemirror-dat.html b/prosemirror-dat/prosemirror-dat.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>Yjs Prosemirror Dat Example</title>
+    <script type="text/javascript" src="./dist/prosemirror.bundle.js" async></script>
+    <link rel=stylesheet href="./prosemirror.css" async defer>
+    <style>
+      placeholder {
+        display: inline;
+        border: 1px solid #ccc;
+        color: #ccc;
+      }
+      placeholder:after {
+        content: "☁";
+        font-size: 200%;
+        line-height: 0.1;
+        font-weight: bold;
+      }
+      .ProseMirror img { max-width: 100px }
+
+      /* this is a rough fix for the first cursor position when the first paragraph is empty */
+      .ProseMirror > .ProseMirror-yjs-cursor:first-child {
+        margin-top: 16px;
+      }
+      .ProseMirror p:first-child, .ProseMirror h1:first-child, .ProseMirror h2:first-child, .ProseMirror h3:first-child, .ProseMirror h4:first-child, .ProseMirror h5:first-child, .ProseMirror h6:first-child {
+        margin-top: 16px
+      }
+      /* This gives the remote user caret. The colors are automatically overwritten*/
+      .ProseMirror-yjs-cursor {
+        position: relative;
+        margin-left: -1px;
+        margin-right: -1px;
+        border-left: 1px solid black;
+        border-right: 1px solid black;
+        border-color: orange;
+        word-break: normal;
+        pointer-events: none;
+      }
+      /* This renders the username above the caret */
+      .ProseMirror-yjs-cursor > div {
+        position: absolute;
+        top: -1.05em;
+        left: -1px;
+        font-size: 13px;
+        background-color: rgb(250, 129, 0);
+        font-family: serif;
+        font-style: normal;
+        font-weight: normal;
+        line-height: normal;
+        user-select: none;
+        color: white;
+        padding-left: 2px;
+        padding-right: 2px;
+        white-space: nowrap;
+      }
+      #y-functions {
+        position: absolute;
+        top: 20px;
+        right: 20px;
+      }
+      #y-functions > * {
+        display: inline-block;
+      }
+    </style>
+</head>
+<body>
+  <div id="y-functions">
+    <div id="y-version"></div>
+    <button type="button" id="y-connect-btn">Disconnect</button>
+  </div>
+  <p></p>
+  <p>This is a demo of the <a href="https://github.com/yjs/yjs">Yjs</a> ⇔ <a href="http://prosemirror.net/">ProseMirror</a> binding: <a href="https://github.com/yjs/y-prosemirror">y-prosemirror</a>.</p>
+  <p>The content of this editor is shared with every client that visits this domain.</p>
+</body>
+</html>