PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

ignore react comment nodes when locating/setting caret

Browse source
This commit is contained in:
Bruno Windels 2019-05-08 11:12:47 +02:00
parent 6be6492cd2
commit 8f0074f824
1 changed files with 46 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
src/editor/caret.js
View file

@ -26,7 +26,10 @@ export function getCaretOffset(editor) {
if (node === editor) { if (node === editor) {
let offset = 0; let offset = 0;
for (let i = 0; i < sel.focusOffset; ++i) { for (let i = 0; i < sel.focusOffset; ++i) {
offset += editor.childNodes[i].textContent.length; const node = editor.childNodes[i];
if (isVisibleNode(node)) {
offset += node.textContent.length;
}
} }
return {offset, atNodeEnd: false}; return {offset, atNodeEnd: false};
} }
@ -36,7 +39,9 @@ export function getCaretOffset(editor) {
// include all preceding siblings of the non-direct editor children // include all preceding siblings of the non-direct editor children
while (node.previousSibling) { while (node.previousSibling) {
node = node.previousSibling; node = node.previousSibling;
offset += node.textContent.length; if (isVisibleNode(node)) {
offset += node.textContent.length;
}
} }
// then move up // then move up
// I guess technically there could be preceding text nodes in the parents here as well, // I guess technically there could be preceding text nodes in the parents here as well,
@ -48,7 +53,9 @@ export function getCaretOffset(editor) {
// now include the text length of all preceding direct editor children // now include the text length of all preceding direct editor children
while (node.previousSibling) { while (node.previousSibling) {
node = node.previousSibling; node = node.previousSibling;
offset += node.textContent.length; if (isVisibleNode(node)) {
offset += node.textContent.length;
}
} }
// { // {
// const {focusOffset, focusNode} = sel; // const {focusOffset, focusNode} = sel;
@ -57,22 +64,40 @@ export function getCaretOffset(editor) {
return {offset, atNodeEnd}; return {offset, atNodeEnd};
} }
export function setCaretPosition(editor, caretPosition) { function isVisibleNode(node) {
if (caretPosition) { return node.nodeType === Node.ELEMENT_NODE || node.nodeType === Node.TEXT_NODE;
let focusNode = editor.childNodes[caretPosition.index]; }
if (!focusNode) {
focusNode = editor; function untilVisibleNode(node) {
} else { // need to ignore comment nodes that react uses
// make sure we have a text node while (node && !isVisibleNode(node)) {
if (focusNode.nodeType === Node.ELEMENT_NODE) { node = node.nextSibling;
focusNode = focusNode.childNodes[0]; }
} return node;
} }
const sel = document.getSelection();
sel.removeAllRanges(); export function setCaretPosition(editor, caretPosition) {
const range = document.createRange(); let node = untilVisibleNode(editor.firstChild);
range.setStart(focusNode, caretPosition.offset); if (!node) {
range.collapse(true); node = editor;
sel.addRange(range); } else {
} let {index} = caretPosition;
while (node && index) {
node = untilVisibleNode(node.nextSibling);
--index;
}
if (!node) {
node = editor;
} else if (node.nodeType === Node.ELEMENT_NODE) {
// make sure we have a text node
node = node.childNodes[0];
}
}
console.log("setting caret", caretPosition, node);
const sel = document.getSelection();
sel.removeAllRanges();
const range = document.createRange();
range.setStart(node, caretPosition.offset);
range.collapse(true);
sel.addRange(range);
} }