You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
509 lines
18 KiB
JavaScript
509 lines
18 KiB
JavaScript
define([
|
|
'/common/cursor-treesome.js',
|
|
'/bower_components/rangy/rangy-core.min.js'
|
|
], function (Tree, Rangy) {
|
|
var verbose = function (x) { if (window.verboseMode) { console.log(x); } };
|
|
|
|
/* accepts the document used by the editor */
|
|
var Cursor = function (inner) {
|
|
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']
|
|
};
|
|
while (inNode.el.nodeType !== Node.TEXT_NODE && inNode.el.childNodes.length > inNode.offset) {
|
|
inNode.el = inNode.el.childNodes[inNode.offset];
|
|
inNode.offset = 0;
|
|
}
|
|
var current = inNode.el;
|
|
var path = [];
|
|
while (current !== element) {
|
|
path.unshift(current);
|
|
current = current.parentNode;
|
|
}
|
|
|
|
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++) {
|
|
try {
|
|
newOffset -= (getTextNodeValue(el.childNodes[i]) || el.childNodes[i].outerHTML).length;
|
|
} catch (e) {
|
|
console.log(el);
|
|
console.log(el.childNodes[i]);
|
|
}
|
|
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;
|
|
};
|
|
|
|
cursor.getNewOffset = function (ops) {
|
|
return {
|
|
selectionStart: offsetTransformRange(offsetRange.start, ops),
|
|
selectionEnd: offsetTransformRange(offsetRange.end, ops)
|
|
};
|
|
};
|
|
cursor.getNewRange = function (data, ops) {
|
|
offsetRange.start = offsetTransformRange(data.start, ops);
|
|
offsetRange.end = offsetTransformRange(data.end, ops);
|
|
var range = getRangeFromOffset(inner);
|
|
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
|
|
// keep it internally
|
|
var Range = cursor.Range = {
|
|
start: {
|
|
el: null,
|
|
offset: 0
|
|
},
|
|
end: {
|
|
el: null,
|
|
offset:0
|
|
}
|
|
};
|
|
|
|
/* cursor.update takes notes about wherever the cursor was last seen
|
|
in the event of a cursor loss, the information produced by side
|
|
effects of this function should be used to recover the cursor
|
|
|
|
returns an error string if no range is found
|
|
*/
|
|
cursor.update = function (sel, root) {
|
|
verbose("cursor.update");
|
|
root = root || inner;
|
|
sel = sel || Rangy.getSelection(root);
|
|
|
|
// if the root element has no focus, there will be no range
|
|
if (!sel.rangeCount) { return; }
|
|
var range = sel.getRangeAt(0);
|
|
|
|
// Big R Range is caught in closure, and maintains persistent state
|
|
['start', 'end'].forEach(function (pos) {
|
|
Range[pos].el = range[pos+'Container'];
|
|
Range[pos].offset = range[pos+'Offset'];
|
|
});
|
|
};
|
|
|
|
cursor.exists = function () {
|
|
return (Range.start.el?1:0) | (Range.end.el?2:0);
|
|
};
|
|
|
|
/*
|
|
0 if neither
|
|
1 if start
|
|
2 if end
|
|
3 if start and end
|
|
*/
|
|
cursor.inNode = function (el) {
|
|
var state = ['start', 'end'].map(function (pos, i) {
|
|
return Tree.contains(el, Range[pos].el)? i +1: 0;
|
|
});
|
|
return state[0] | state[1];
|
|
};
|
|
|
|
var confineOffsetToElement = cursor.confineOffsetToElement = function (el, offset) {
|
|
return Math.max(Math.min(offset, el.textContent.length), 0);
|
|
};
|
|
|
|
var makeSelection = cursor.makeSelection = function () {
|
|
var sel = Rangy.getSelection(inner);
|
|
return sel;
|
|
};
|
|
|
|
var makeRange = cursor.makeRange = function () {
|
|
return Rangy.createRange();
|
|
};
|
|
|
|
var fixStart = cursor.fixStart = function (el, offset) {
|
|
Range.start.el = el;
|
|
Range.start.offset = confineOffsetToElement(el,
|
|
(typeof offset !== 'undefined') ? offset : Range.start.offset);
|
|
};
|
|
|
|
var fixEnd = cursor.fixEnd = function (el, offset) {
|
|
Range.end.el = el;
|
|
Range.end.offset = confineOffsetToElement(el,
|
|
(typeof offset !== 'undefined') ? offset : Range.end.offset);
|
|
};
|
|
|
|
var fixSelection = cursor.fixSelection = function (sel, range) {
|
|
try {
|
|
if (Tree.contains(Range.start.el, inner) && Tree.contains(Range.end.el, inner)) {
|
|
var order = Tree.orderOfNodes(Range.start.el, Range.end.el, inner);
|
|
var backward;
|
|
|
|
// this could all be one line but nobody would be able to read it
|
|
if (order === -1) {
|
|
// definitely backward
|
|
backward = true;
|
|
} else if (order === 0) {
|
|
// might be backward, check offsets to know for sure
|
|
backward = (Range.start.offset > Range.end.offset);
|
|
} else {
|
|
// definitely not backward
|
|
backward = false;
|
|
}
|
|
|
|
if (backward) {
|
|
range.setStart(Range.end.el, Range.end.offset);
|
|
range.setEnd(Range.start.el, Range.start.offset);
|
|
} else {
|
|
range.setStart(Range.start.el, Range.start.offset);
|
|
range.setEnd(Range.end.el, Range.end.offset);
|
|
}
|
|
|
|
// actually set the cursor to the new range
|
|
sel.setSingleRange(range);
|
|
} else {
|
|
var errText = "[cursor.fixSelection] At least one of the " +
|
|
"cursor nodes did not exist, could not fix selection";
|
|
//console.error(errText);
|
|
return errText;
|
|
}
|
|
} catch (e) { console.error(e); }
|
|
};
|
|
|
|
cursor.pushDelta = function (oldVal, newVal) {
|
|
if (oldVal === newVal) { return; }
|
|
|
|
var commonStart = 0;
|
|
while (oldVal.charAt(commonStart) === newVal.charAt(commonStart)) {
|
|
commonStart++;
|
|
}
|
|
|
|
var commonEnd = 0;
|
|
while (oldVal.charAt(oldVal.length - 1 - commonEnd) === newVal.charAt(newVal.length - 1 - commonEnd) &&
|
|
commonEnd + commonStart < oldVal.length && commonEnd + commonStart < newVal.length) {
|
|
commonEnd++;
|
|
}
|
|
|
|
var insert = false, remove = false;
|
|
if (oldVal.length !== commonStart + commonEnd) {
|
|
// there was a removal?
|
|
remove = true;
|
|
}
|
|
if (newVal.length !== commonStart + commonEnd) {
|
|
// there was an insertion?
|
|
insert = true;
|
|
}
|
|
|
|
var lengthDelta = newVal.length - oldVal.length;
|
|
|
|
return {
|
|
commonStart: commonStart,
|
|
commonEnd: commonEnd,
|
|
delta: lengthDelta,
|
|
insert: insert,
|
|
remove: remove
|
|
};
|
|
};
|
|
|
|
cursor.transformRange = function (cursorRange, 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 = cursorRange.offset;
|
|
if (Array.isArray(ops)) {
|
|
for (var i = ops.length - 1; i >= 0; i--) {
|
|
c = transformCursor(c, ops[i]);
|
|
}
|
|
cursorRange.offset = c;
|
|
}
|
|
};
|
|
|
|
cursor.brFix = function () {
|
|
cursor.update();
|
|
var start = Range.start;
|
|
var end = Range.end;
|
|
if (!start.el) { return; }
|
|
|
|
if (start.el === end.el && start.offset === end.offset) {
|
|
if (start.el.tagName === 'BR') {
|
|
var br = start.el;
|
|
|
|
var P = (Tree.indexOfNode(br) === 0 ?
|
|
br.parentNode: br.previousSibling);
|
|
|
|
[cursor.fixStart, cursor.fixEnd].forEach(function (f) {
|
|
f(P, 0);
|
|
});
|
|
|
|
cursor.fixSelection(cursor.makeSelection(), cursor.makeRange());
|
|
}
|
|
}
|
|
};
|
|
|
|
cursor.lastTextNode = function () {
|
|
var lastEl = Tree.rightmostNode(inner);
|
|
if (lastEl && lastEl.nodeType === 3) { return lastEl; }
|
|
|
|
var firstEl = Tree.leftmostNode(inner);
|
|
|
|
while (lastEl !== firstEl) {
|
|
lastEl = Tree.previousNode(lastEl, inner);
|
|
if (lastEl && lastEl.nodeType === 3) { return lastEl; }
|
|
}
|
|
|
|
return lastEl;
|
|
};
|
|
|
|
cursor.firstTextNode = function () {
|
|
var firstEl = Tree.leftmostNode(inner);
|
|
if (firstEl && firstEl.nodeType === 3) { return firstEl; }
|
|
|
|
var lastEl = Tree.rightmostNode(inner);
|
|
|
|
while (firstEl !== lastEl) {
|
|
firstEl = Tree.nextNode(firstEl, inner);
|
|
if (firstEl && firstEl.nodeType === 3) { return firstEl; }
|
|
}
|
|
return firstEl;
|
|
};
|
|
|
|
cursor.setToStart = function () {
|
|
var el = cursor.firstTextNode();
|
|
if (!el) { return; }
|
|
fixStart(el, 0);
|
|
fixEnd(el, 0);
|
|
fixSelection(makeSelection(), makeRange());
|
|
return el;
|
|
};
|
|
|
|
cursor.setToEnd = function () {
|
|
var el = cursor.lastTextNode();
|
|
if (!el) { return; }
|
|
|
|
var offset = el.textContent.length;
|
|
|
|
fixStart(el, offset);
|
|
fixEnd(el, offset);
|
|
fixSelection(makeSelection(), makeRange());
|
|
return el;
|
|
};
|
|
|
|
return cursor;
|
|
};
|
|
|
|
Cursor.Tree = Tree;
|
|
|
|
return Cursor;
|
|
});
|