add demo project to repository

yjs · Jan 9, 2021 · 02084a5 · 02084a5
1 parent a1ddb78
commit 02084a5
Show file tree

Hide file tree

Showing 6 changed files with 418 additions and 351 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8"/>
+ <title>Yjs Quill Example</title>
+ <script type="text/javascript" src="../dist/quill-demo.js" async></script>
+ <link rel=stylesheet href="./quill.css" async defer>
+ <link rel=stylesheet href="//cdn.quilljs.com/1.3.6/quill.snow.css" async
+ defer>
+ <link rel=stylesheet href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css" async
+ defer>
+ <link rel=stylesheet href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai-sublime.min.css" async
+ defer>
+</head>
+<body>
+ <button type="button" id="y-connect-btn">Disconnect</button>
+ <p></p>
+ <p>This is a demo of the <a href="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/yjs/yjs">Yjs</a> ⇔ <a href="https://quilljs.com/">Quill</a> binding: <a href="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/yjs/y-quill">y-quill</a>.</p>
+ <p>The content of this editor is shared with every client that visits this domain.</p>
+</body>
+</html>
diff --git a/demo/quill-demo.js b/demo/quill-demo.js
@@ -0,0 +1,59 @@
+/* eslint-env browser */
+
+import * as Y from 'yjs'
+import { WebrtcProvider } from 'y-webrtc'
+import { QuillBinding } from 'y-quill'
+import Quill from 'quill'
+import QuillCursors from 'quill-cursors'
+
+Quill.register('modules/cursors', QuillCursors)
+
+window.addEventListener('load', () => {
+ const ydoc = new Y.Doc()
+ const provider = new WebrtcProvider('quill-demo', ydoc)
+ const type = ydoc.getText('quill')
+ const editorContainer = document.createElement('div')
+ editorContainer.setAttribute('id', 'editor')
+ document.body.insertBefore(editorContainer, null)
+
+ var editor = new Quill(editorContainer, {
+ modules: {
+ cursors: true,
+ toolbar: [
+ [{ header: [1, 2, false] }],
+ ['bold', 'italic', 'underline'],
+ ['image', 'code-block']
+ ],
+ history: {
+ userOnly: true
+ }
+ },
+ placeholder: 'Start collaborating...',
+ theme: 'snow' // or 'bubble'
+ })
+
+ const binding = new QuillBinding(type, editor, provider.awareness)
+
+ /*
+ // Define user name and user name
+ // Check the quill-cursors package on how to change the way cursors are rendered
+ provider.awareness.setLocalStateField('user', {
+ name: 'Typing Jimmy',
+ color: 'blue'
+ })
+ */
+
+ const connectBtn = document.getElementById('y-connect-btn')
+ connectBtn.addEventListener('click', () => {
+ if (provider.shouldConnect) {
+ provider.disconnect()
+ connectBtn.textContent = 'Connect'
+ } else {
+ provider.connect()
+ connectBtn.textContent = 'Disconnect'
+ }
+ })
+
+ // @ts-ignore
+ window.example = { provider, ydoc, type, binding, Y }
+})
diff --git a/demo/quill.css b/demo/quill.css
@@ -0,0 +1,3 @@
+#editor {
+ min-height: 500px;
+}