add quilljs, create channel for syncing documents

assets/js/hooks/textEditHook.js

@@ -0,0 +1,43 @@
+// https://elixirforum.com/t/how-to-connect-quill-with-phoenix/46004
+import Quill from 'quill';
+import socket from '../user_socket';
+
+export let TextEditor = {
+  mounted() {
+    const padId = this.el.dataset.padId;
+    this.clientId;
+
+    this.quill = new Quill(this.el, {
+      theme: 'snow'
+    });
+
+    let channel = socket.channel(`pad:${padId}`, {});
+
+    channel.join()
+      .receive("ok", ({uuid, contents}) => { 
+        this.clientId = uuid;
+        this.quill.setContents(contents);
+      })
+      // TODO: Probably need to show an alert that they couldn't join
+      .receive("error", resp => { console.log("Unable to join", resp) });
+
+    channel.on("update", ({change, client_id}) => {
+      if(client_id === this.clientId) return;
+      let range = this.quill.getSelection();
+      this.quill.updateContents(change);
+      range && this.quill.setSelection(range.index, range.length);
+    })
+
+    this.quill.on('text-change', (delta, oldDelta, source) => {
+      if (delta == oldDelta) return;
+      if (source == 'api') {
+        console.log("An API call triggered this change.");
+      } else if (source == 'user') {
+        channel.push('update', {change: delta, client_id: this.clientId});
+      }
+    });
+  },
+  updated(){
+    console.log('U');
+  }
+}