componentDidMount() {
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{'header': 1}, {'header': 2}], // custom button values
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'script': 'sub'}, {'script': 'super'}], // superscript/subscript
[{'indent': '-1'}, {'indent': '+1'}], // outdent/indent
[{'direction': 'rtl'}], // text direction
[{'size': ['small', false, 'large', 'huge']}], // custom dropdown
[{'header': [1, 2, 3, 4, 5, 6, false]}],
[{'color': []}, {'background': []}], // dropdown with defaults from theme
[{'font': []}],
[{'align': []}],
['link', 'image']
];
const editorOptions = {
debug: 'warn',
modules: {
toolbar: toolbarOptions
},
placeholder: '',
readOnly: false,
theme: 'snow'
};
const editor = this.editor = new Quill(this.quillEditor, editorOptions);
const {editorValue} = this.state;
if (editorValue) {
editor.clipboard.dangerouslyPasteHTML(editorValue);
}
editor.on('text-change', this.handleChangeEditor.bind(this));
}
function setupEditor() {
if (toolbarElement) {
options.modules.toolbar.container = toolbarElement[0];
}
if (!editorElement) {
editorElement = angular.element('<div/>');
$element.append(editorElement);
}
var editorElem = editorElement[0];
editor = new Quill(editorElem, options);
if (onSetupFn) {
onSetupFn(editor);
}
ngModel.$render();
editor.on('text-change', function(delta, source) {
updateModel(this.getHTML());
if (!initialized) {
ngModel.$setPristine();
initialized = true;
}
});
editor.once('selection-change', function(hasFocus) {
angular.element(editor).toggleClass('focus', hasFocus);
// Hack for inability to scroll on mobile
if (/mobile/i.test(navigator.userAgent)) {
angular.element(editor).css('height', editor.root.scrollHeight + 30) // 30 for padding
}
});
}
componentDidMount() {
const { input: { value }, toolbar } = this.props;
this.quill = new Quill(this.divRef, {
modules: { toolbar },
theme: 'snow',
});
this.quill.pasteHTML(value);
this.editor = this.divRef.querySelector('.ql-editor');
this.quill.on('text-change', debounce(this.onTextChange, 500));
}
doc.subscribe(function(err) {
if (err) throw err;
var quill = new Quill('#editor', {theme: 'snow'});
quill.setContents(doc.data);
quill.on('text-change', function(delta, oldDelta, source) {
if (source !== 'user') return;
doc.submitOp(delta, {source: quill});
});
doc.on('op', function(op, source) {
if (source === quill) return;
quill.updateContents(op);
});
});
link: function(scope, element, attrs, ngModel) {
var container = element.find('.text-editor').get(0);
var toolbar = element.find('.text-editor-toolbar').get(0);
var quill = new Quill(container, {
formats: ['bold', 'italic', 'link', 'bullet', 'list'],
});
quill.addModule('toolbar', {container: toolbar});
quill.addModule('link-tooltip', true);
ngModel.$render = function() {
quill.setHTML(ngModel.$viewValue || '');
};
quill.on('text-change', function() {
scope.$apply(function() {
var html = quill.getHTML();
ngModel.$setViewValue(html);
});
});
}
static initDocument() {
let socket = new Socket("/socket")
var quill = new Quill('#editor', {
});
quill.addModule('toolbar', { container: '#toolbar' });
let cursors = quill.addModule('multi-cursor', {
timeout: 10000
});
socket.connect()
socket.onClose( e => console.log("Closed connection") )
let selectionStart, selectionEnd;
const id = $('#document-id').val();
const userName = $('#user-name').val();
const userId = $('#user-id').val();
let channel = socket.channel("docs:channel", {
id: id,
user_name: userName,
user_id: userId
});
channel.join()
.receive( "error", () => console.log("Connection error") )
.receive( "ok", () => console.log("Connected") )
quill.on('text-change', (delta, source) => {
if (source === 'user') {
selectionStart = quill.getSelection().start;
selectionEnd = quill.getSelection().end;
channel.push("new:content", {
content: quill.getHTML(),
id: id,
position: selectionEnd,
user_name: userName,
})
}
})
channel.on( "new:content", msg => {
if (msg["document_id"] != id) { return; }
quill.setHTML(msg['content'])
if (msg['user_name'] != userName) {
cursors.setCursor(
msg['user_name'],
msg['position'],
msg['user_name'],
'rgb(255, 0, 255)'
);
}
quill.setSelection(selectionStart, selectionEnd);
});
channel.on( "update:users", msg => {
if (msg["document_id"] != id) { return; }
let list = '';
msg.users.filter(user => user.id != userId).map((user) => {
list += `<p class='user-${user.id}'>${user.name}</p>`;
})
$('#viewing-users .list').html(list);
});
channel.on( "replace:expression", msg => {
const expr = '{{' + msg["expression"] + '}}'
const value = msg["value"][0];
const positionOffset = expr.length - value.toString().length;
const content = quill.getHTML().replace(expr, value);
quill.setHTML(content)
quill.setSelection(
selectionStart - positionOffset,
selectionEnd - positionOffset);
});
channel.on("document:saved", msg => {
$('.document .notification').addClass('visible');
setTimeout(() => {
$('.document .notification').removeClass('visible');
}, 2500);
});
}