add quilljs, create channel for syncing documents

assets/js/app.js

@@ -1,6 +1,6 @@
 // If you want to use Phoenix channels, run `mix help phx.gen.channel`
 // to get started and then uncomment the line below.
-// import "./user_socket.js"
+import "./user_socket.js"
 
 // You can include dependencies in two ways.
 //
@@ -21,9 +21,14 @@ import "phoenix_html"
 import {Socket} from "phoenix"
 import {LiveSocket} from "phoenix_live_view"
 import topbar from "../vendor/topbar"
+import { TextEditor } from './hooks/textEditHook'
+
 
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
-let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
+
+let Hooks = {}
+Hooks.TextEditor = TextEditor
+let liveSocket = new LiveSocket("/live", Socket, {hooks: Hooks, params: {_csrf_token: csrfToken}})
 
 // Show progress bar on live navigation and form submits
 topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})

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');
+  }
+}

assets/js/user_socket.js

@@ -0,0 +1,6 @@
+import {Socket} from "phoenix"
+
+let socket = new Socket("/socket", {params: {token: window.userToken}})
+socket.connect()
+
+export default socket;