mirror of https://github.com/xwiki-labs/cryptpad
Cursor improvements in pad, code and slide
This commit is contained in:
parent
d76c21fcf5
commit
a11a883cff
|
@ -165,11 +165,13 @@ a > img {
|
||||||
border-left: none;
|
border-left: none;
|
||||||
border-right-width: 4px;
|
border-right-width: 4px;
|
||||||
margin-right: -5px;
|
margin-right: -5px;
|
||||||
|
margin-left: -1px;
|
||||||
}
|
}
|
||||||
.cp-cursor-position[data-type="end"] {
|
.cp-cursor-position[data-type="end"] {
|
||||||
border-right: none;
|
border-right: none;
|
||||||
border-left-width: 4px;
|
border-left-width: 4px;
|
||||||
margin-left: -5px;
|
margin-left: -5px;
|
||||||
|
margin-right: -1px;
|
||||||
}
|
}
|
||||||
.cp-cursor-avatar {
|
.cp-cursor-avatar {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
@ -310,18 +310,24 @@ define([
|
||||||
});
|
});
|
||||||
|
|
||||||
framework.setContentGetter(function () {
|
framework.setContentGetter(function () {
|
||||||
|
CodeMirror.removeCursors();
|
||||||
var content = CodeMirror.getContent();
|
var content = CodeMirror.getContent();
|
||||||
content.highlightMode = CodeMirror.highlightMode;
|
content.highlightMode = CodeMirror.highlightMode;
|
||||||
previewPane.draw();
|
previewPane.draw();
|
||||||
return content;
|
return content;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
var cursorTo;
|
||||||
|
var updateCursor = function () {
|
||||||
|
if (cursorTo) { clearTimeout(cursorTo); }
|
||||||
|
if (editor._noCursorUpdate) { return; }
|
||||||
|
cursorTo = setTimeout(function () {
|
||||||
|
framework.updateCursor();
|
||||||
|
}, 500); // 500ms to make sure it is sent after chainpad sync
|
||||||
|
};
|
||||||
framework.onCursorUpdate(CodeMirror.setRemoteCursor);
|
framework.onCursorUpdate(CodeMirror.setRemoteCursor);
|
||||||
framework.setCursorGetter(CodeMirror.getCursor);
|
framework.setCursorGetter(CodeMirror.getCursor);
|
||||||
editor.on('cursorActivity', function () {
|
editor.on('cursorActivity', updateCursor);
|
||||||
if (editor._noCursorUpdate) { return; }
|
|
||||||
framework.updateCursor();
|
|
||||||
});
|
|
||||||
|
|
||||||
framework.onEditableChange(function () {
|
framework.onEditableChange(function () {
|
||||||
editor.setOption('readOnly', framework.isLocked() || framework.isReadOnly());
|
editor.setOption('readOnly', framework.isLocked() || framework.isReadOnly());
|
||||||
|
|
|
@ -402,6 +402,12 @@ define([
|
||||||
return html;
|
return html;
|
||||||
};
|
};
|
||||||
var marks = {};
|
var marks = {};
|
||||||
|
exp.removeCursors = function () {
|
||||||
|
for (var id in marks) {
|
||||||
|
marks[id].clear();
|
||||||
|
delete marks[id];
|
||||||
|
}
|
||||||
|
};
|
||||||
exp.setRemoteCursor = function (data) {
|
exp.setRemoteCursor = function (data) {
|
||||||
if (data.leave) {
|
if (data.leave) {
|
||||||
$('.cp-codemirror-cursor[id^='+data.id+']').each(function (i, el) {
|
$('.cp-codemirror-cursor[id^='+data.id+']').each(function (i, el) {
|
||||||
|
|
|
@ -136,6 +136,15 @@ define([
|
||||||
end: cursorObj.selectionEnd
|
end: cursorObj.selectionEnd
|
||||||
}, ops);
|
}, ops);
|
||||||
var cursorEl = makeCursor(id, cursorObj);
|
var cursorEl = makeCursor(id, cursorObj);
|
||||||
|
['start', 'end'].forEach(function (t) {
|
||||||
|
// Prevent the cursor from creating a new line at the beginning
|
||||||
|
if (r[t].el.nodeName.toUpperCase() === 'BODY') {
|
||||||
|
if (!r[t].el.childNodes.length) { r[t] = null; return; }
|
||||||
|
r[t].el = r[t].el.childNodes[0];
|
||||||
|
r[t].offset = 0;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (!r.start || !r.end) { return; }
|
||||||
if (r.start.el === r.end.el && r.start.offset === r.end.offset) {
|
if (r.start.el === r.end.el && r.start.offset === r.end.offset) {
|
||||||
// Cursor
|
// Cursor
|
||||||
addCursorAtRange(cursorEl, r, cursorObj, '');
|
addCursorAtRange(cursorEl, r, cursorObj, '');
|
||||||
|
|
|
@ -466,17 +466,23 @@ define([
|
||||||
});
|
});
|
||||||
|
|
||||||
framework.setContentGetter(function () {
|
framework.setContentGetter(function () {
|
||||||
|
CodeMirror.removeCursors();
|
||||||
var content = CodeMirror.getContent();
|
var content = CodeMirror.getContent();
|
||||||
Slide.update(content.content);
|
Slide.update(content.content);
|
||||||
return content;
|
return content;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
var cursorTo;
|
||||||
|
var updateCursor = function () {
|
||||||
|
if (cursorTo) { clearTimeout(cursorTo); }
|
||||||
|
if (editor._noCursorUpdate) { return; }
|
||||||
|
cursorTo = setTimeout(function () {
|
||||||
|
framework.updateCursor();
|
||||||
|
}, 500); // 500ms to make sure it is sent after chainpad sync
|
||||||
|
};
|
||||||
framework.onCursorUpdate(CodeMirror.setRemoteCursor);
|
framework.onCursorUpdate(CodeMirror.setRemoteCursor);
|
||||||
framework.setCursorGetter(CodeMirror.getCursor);
|
framework.setCursorGetter(CodeMirror.getCursor);
|
||||||
editor.on('cursorActivity', function () {
|
editor.on('cursorActivity', updateCursor);
|
||||||
if (editor._noCursorUpdate) { return; }
|
|
||||||
framework.updateCursor();
|
|
||||||
});
|
|
||||||
|
|
||||||
framework.onEditableChange(function () {
|
framework.onEditableChange(function () {
|
||||||
editor.setOption('readOnly', framework.isLocked() || framework.isReadOnly());
|
editor.setOption('readOnly', framework.isLocked() || framework.isReadOnly());
|
||||||
|
|
Loading…
Reference in New Issue