Merge pull request #5 from fireJera/master

merge display and index
we-miks · Nov 9, 2020 · fa2fd0e · fa2fd0e
2 parents dc493c4 + 3e2516d
commit fa2fd0e
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 0 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -12,6 +12,13 @@
                 text-align: center;
                 font-size: 24px;
             }
+
+            .page .subtitle {
+                padding: 10px;
+                text-align: center;
+                font-size: 24px;
+            }
+
             .page .editor {
                 position: relative;
                 margin-top: 32px;
@@ -21,6 +28,14 @@
                 padding: 0 90px;
                 min-height: 400px;
             }
+
+            .page .content {
+                width: 660px;
+                margin: 0 auto;
+                border-style:solid;
+                border-width: 1px;
+                border-color: black;
+            }
         </style>
     </head>
     <body>
@@ -29,6 +44,8 @@
             <div class="editor">
                 <div class="editor-container" id="container"></div>
             </div>
+            <div class="subtitle">Miks Collaborative Editor Content</div>
+            <div class="content ql-editor"></div>
         </div>
     </body>
 </html>
diff --git a/demo/index.js b/demo/index.js
@@ -3,6 +3,15 @@ import 'quill/dist/quill.snow.css'
 import EditorEvents from "../editor-events";
 import '../modules/task-list';
 
+import ReconnectingWebSocket from "reconnecting-websocket";
+import ShareDB from "sharedb/lib/client";
+import Quill from 'quill';
+import richText from "rich-text";
+ShareDB.types.register(richText.type);
+
+import '../display.styl';
+
+
 let authors = [
     {
         id: 1,
@@ -113,6 +122,43 @@ editor.on(EditorEvents.synchronizationError, (err) => {
     console.log(err);
 });
 
+
+
 let websocketEndpoint = "ws://127.0.0.1:8080";
 
 editor.syncThroughWebsocket(websocketEndpoint, "examples", "test-doc");
+
+let socket = new ReconnectingWebSocket(websocketEndpoint);
+
+let connection = new ShareDB.Connection(socket);
+
+let doc = connection.get("examples", "test-doc");
+
+// Create a hidden quill editor to parse delta to html
+
+
+let editorContainer = document.createElement('div');
+editorContainer.style.display = 'none';
+
+let quill = new Quill(editorContainer);
+
+doc.fetch((err) => {
+    if(err) {
+        console.log(err);
+        return;
+    }
+
+    let delta = doc.data;
+    quill.setContents(delta);
+
+    document.querySelector(".content").innerHTML = quill.root.innerHTML;
+
+    doc.destroy();
+    socket.close();
+
+    editor.on(EditorEvents.editorTextChanged, (delta) => {
+        let del = delta.oldDelta.compose(delta.delta)
+        quill.setContents(del);
+        document.querySelector(".content").innerHTML = quill.root.innerHTML;
+    })
+});