48 lines
1.3 KiB
JavaScript
48 lines
1.3 KiB
JavaScript
// 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);
|
|
})
|
|
|
|
channel.on("saved", () => {
|
|
console.log('Saved');
|
|
// TODO: Show a saved message
|
|
})
|
|
|
|
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');
|
|
}
|
|
} |