diff --git a/demo/index.html b/demo/index.html index 4f0296e..deb158a 100644 --- 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; + } @@ -29,6 +44,8 @@
+
Miks Collaborative Editor Content
+
\ No newline at end of file diff --git a/demo/index.js b/demo/index.js index 77c3012..4bef431 100644 --- 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; + }) +}); \ No newline at end of file