infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

New cursor recovery system (beta)

Browse Source
pull/1/head
yflory 6 years ago
parent 518c1e0d3e
commit dbad925e5e
2 changed files with 240 additions and 6 deletions
Show Stats Download Patch File Download Diff File

225
www/common/cursor.js
Unescape Escape View File

@ -8,6 +8,231 @@ define([
var Cursor = function (inner) { var Cursor = function (inner) {
var cursor = {}; var cursor = {};
var getTextNodeValue = function (el) {
if (!el.data) { return; }
// We want to transform html entities into their code (non-breaking spaces into $ )
var div = document.createElement('div');
div.innerText = el.data;
return div.innerHTML;
};
// Store the cursor position as an offset from the beginning of the text HTML content
var offsetRange = cursor.offsetRange = {
start: 0,
end: 0
};
// Get the length of the opening tag of an node (<body class="cp"> ==> 17)
var getOpeningTagLength = function (node) {
if (node.nodeType === node.TEXT_NODE) { return 0; }
var html = node.outerHTML;
var tagRegex = /^(<\s*[a-zA-Z-]*[^>]*>)(.+)/;
var match = tagRegex.exec(html);
var res = match && match.length > 1 ? match[1].length : 0;
return res;
};
// Get the offset recursively. We start with <body> and continue following the
// path to the range
var offsetInNode = function (element, offset, path, range) {
if (path.length === 0) {
offset += getOpeningTagLength(range.el);
if (range.el.nodeType === range.el.TEXT_NODE) {
var div = document.createElement('div');
div.innerText = range.el.data.slice(0, range.offset);
return offset + div.innerHTML.length;
}
return offset + range.offset;
}
offset += getOpeningTagLength(element);
for (var i = 0; i < element.childNodes.length; i++) {
if (element.childNodes[i] === path[0]) {
return offsetInNode(path.shift(), offset, path, range);
}
// It is not yet our path, add the length of the text node or tag's outerHTML
offset += (getTextNodeValue(element.childNodes[i]) || element.childNodes[i].outerHTML).length;
}
};
// Get the cursor position as a range and transform it into
// an offset from the beginning of the outer HTML
var getOffsetFromRange = function (element) {
var doc = element.ownerDocument || element.document;
var win = doc.defaultView || doc.parentWindow;
var o = {
start: 0,
end: 0
};
if (typeof win.getSelection !== "undefined") {
var sel = win.getSelection();
if (sel.rangeCount > 0) {
var range = win.getSelection().getRangeAt(0);
// Do it for both start and end
['start', 'end'].forEach(function (t) {
var inNode = {
el: range[t + 'Container'],
offset: range[t + 'Offset']
};
var current = inNode.el;
var path = [];
while (current !== element) {
path.unshift(current);
current = current.parentElement;
}
if (current === element) { // Should always be the case
o[t] = offsetInNode(current, 0, path, inNode);
} else {
console.error('???');
}
});
}
}
return o;
};
// Update the value of the offset
// This should be called before applying changes to the document
cursor.offsetUpdate = function () {
try {
var range = getOffsetFromRange(inner);
offsetRange.start = range.start;
offsetRange.end = range.end;
} catch (e) {
console.error(e);
}
};
// Transform the offset value using the operations from the diff
// between the old and the new states of the document.
var offsetTransformRange = function (offset, ops) {
var transformCursor = function (cursor, op) {
if (!op) { return cursor; }
var pos = op.offset;
var remove = op.toRemove;
var insert = op.toInsert.length;
if (typeof cursor === 'undefined') { return; }
if (typeof remove === 'number' && pos < cursor) {
cursor -= Math.min(remove, cursor - pos);
}
if (typeof insert === 'number' && pos < cursor) {
cursor += insert;
}
return cursor;
};
var c = offset;
if (Array.isArray(ops)) {
for (var i = ops.length - 1; i >= 0; i--) {
c = transformCursor(c, ops[i]);
}
offset = c;
}
return offset;
};
// Get the range starting from <body> and the offset value.
// We substract length of HTML content to the offset until we reach a text node or 0.
// If we reach a text node, it means we're in the final possible child and the
// current valu of the offset is the range one.
// If we reach 0 or a negative value, it means the range in is the current tag
// and we should use offset 0.
var getFinalRange = function (el, offset) {
if (el.nodeType === el.TEXT_NODE) {
// This should be the final text node
var txt = document.createElement("textarea");
txt.appendChild(el.cloneNode());
txt.innerHTML = txt.innerHTML.slice(0, offset);
return {
el: el,
offset: txt.value.length
};
}
if (el.tagName === 'BR') {
// If the range is in a <br>, we have a brFix that will make it better later
return {
el: el,
offset: 0
};
}
// Remove the current tag opening length
offset = offset - getOpeningTagLength(el);
if (offset <= 0) {
// Return the current node...
return {
el: el,
offset: 0
};
}
// For each child, if they length is greater than the current offset, they are
// containing the range element we're looking for.
// Otherwise, our range element is in a later sibling and we can just substract
// their length.
var newOffset = offset;
for (var i = 0; i < el.childNodes.length; i++) {
newOffset -= (getTextNodeValue(el.childNodes[i]) || el.childNodes[i].outerHTML).length;
if (newOffset <= 0) {
return getFinalRange(el.childNodes[i], offset);
}
offset = newOffset;
}
// New offset ends up in the closing tag
// ==> return the last child...
if (el.childNodes.length) {
return getFinalRange(el.childNodes[el.childNodes.length - 1], offset);
} else {
return {
el: el,
offset: 0
};
}
};
// Transform an offset into a range that we can use to restore the cursor
var getRangeFromOffset = function (element) {
var range = {
start: {
el: null,
offset: 0
},
end: {
el: null,
offset: 0
}
};
['start', 'end'].forEach(function (t) {
var offset = offsetRange[t];
var res = getFinalRange(element, offset);
range[t].el = res.el;
range[t].offset = res.offset;
});
return range;
};
// Restore the cursor position after applying the changes.
cursor.restoreOffset = function (ops) {
try {
offsetRange.start = offsetTransformRange(offsetRange.start, ops);
offsetRange.end = offsetTransformRange(offsetRange.end, ops);
var range = getRangeFromOffset(inner);
var sel = cursor.makeSelection();
var r = cursor.makeRange();
cursor.fixStart(range.start.el, range.start.offset);
cursor.fixEnd(range.end.el, range.end.offset);
cursor.fixSelection(sel, r);
cursor.brFix();
} catch (e) {
console.error(e);
}
};
// there ought to only be one cursor at a time, so let's just // there ought to only be one cursor at a time, so let's just
// keep it internally // keep it internally
var Range = cursor.Range = { var Range = cursor.Range = {

21
www/pad/inner.js
Unescape Escape View File

@ -306,6 +306,7 @@ define([
return true; return true;
} }
/*
cursor.update(); cursor.update();
// no use trying to recover the cursor if it doesn't exist // no use trying to recover the cursor if it doesn't exist
@ -314,6 +315,7 @@ define([
/* frame is either 0, 1, 2, or 3, depending on which /* frame is either 0, 1, 2, or 3, depending on which
cursor frames were affected: none, first, last, or both cursor frames were affected: none, first, last, or both
*/ */
/*
var frame = info.frame = cursor.inNode(info.node); var frame = info.frame = cursor.inNode(info.node);
if (!frame) { return; } if (!frame) { return; }
@ -325,19 +327,15 @@ define([
if (frame & 1) { if (frame & 1) {
// push cursor start if necessary // push cursor start if necessary
cursor.transformRange(cursor.Range.start, ops); cursor.transformRange(cursor.Range.start, ops);
/*if (pushes.commonStart < cursor.Range.start.offset) {
cursor.Range.start.offset += pushes.delta;
}*/
} }
if (frame & 2) { if (frame & 2) {
// push cursor end if necessary // push cursor end if necessary
cursor.transformRange(cursor.Range.end, ops); cursor.transformRange(cursor.Range.end, ops);
/*if (pushes.commonStart < cursor.Range.end.offset) {
cursor.Range.end.offset += pushes.delta;
}*/
} }
} }
*/
}, },
/*
postDiffApply: function (info) { postDiffApply: function (info) {
if (info.frame) { if (info.frame) {
if (info.node) { if (info.node) {
@ -351,6 +349,7 @@ define([
cursor.fixSelection(sel, range); cursor.fixSelection(sel, range);
} }
} }
*/
}; };
}; };
@ -515,9 +514,19 @@ define([
$(el).remove(); $(el).remove();
}); });
// Get cursor position
cursor.offsetUpdate();
var oldText = inner.outerHTML;
// Apply the changes
var patch = (DD).diff(inner, userDocStateDom); var patch = (DD).diff(inner, userDocStateDom);
(DD).apply(inner, patch); (DD).apply(inner, patch);
// Restore cursor position
var newText = inner.outerHTML;
var ops = ChainPad.Diff.diff(oldText, newText);
cursor.restoreOffset(ops);
// MEDIATAG: Migrate old mediatags to the widget system // MEDIATAG: Migrate old mediatags to the widget system
$(inner).find('media-tag:not(.cke_widget_element)').each(function (i, el) { $(inner).find('media-tag:not(.cke_widget_element)').each(function (i, el) {
var element = new window.CKEDITOR.dom.element(el); var element = new window.CKEDITOR.dom.element(el);

Write Preview
Loading…
Cancel
Save