message: ignore react comment nodes when locating/setting caret
diff: @@ -26,7 +26,10 @@ export function getCaretOffset(editor) {
  if (node === editor) {
  let offset = 0;
  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};
  }
  @@ -36,8 +39,10 @@ export function getCaretOffset(editor) {
  // include all preceding siblings of the non-direct editor children
  while (node.previousSibling) {
  node = node.previousSibling;
  + if (isVisibleNode(node)) {
  offset += node.textContent.length;
  }
  + }
  // then move up
  // I guess technically there could be preceding text nodes in the parents here as well,
  // but we're assuming there are no mixed text and element nodes
  @@ -48,8 +53,10 @@ export function getCaretOffset(editor) {
  // now include the text length of all preceding direct editor children
  while (node.previousSibling) {
  node = node.previousSibling;
  + if (isVisibleNode(node)) {
  offset += node.textContent.length;
  }
  + }
  // {
  // const {focusOffset, focusNode} = sel;
  // console.log("selection", {focusOffset, focusNode, position, atNodeEnd});
  @@ -57,22 +64,40 @@ export function getCaretOffset(editor) {
  return {offset, atNodeEnd};
  }
  +function isVisibleNode(node) {
  + return node.nodeType === Node.ELEMENT_NODE || node.nodeType === Node.TEXT_NODE;
  +}
  +
  +function untilVisibleNode(node) {
  + // need to ignore comment nodes that react uses
  + while (node && !isVisibleNode(node)) {
  + node = node.nextSibling;
  + }
  + return node;
  +}
  +
  export function setCaretPosition(editor, caretPosition) {
  - if (caretPosition) {
  - let focusNode = editor.childNodes[caretPosition.index];
  - if (!focusNode) {
  - focusNode = editor;
  + let node = untilVisibleNode(editor.firstChild);
  + if (!node) {
  + node = editor;
  } 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
  - if (focusNode.nodeType === Node.ELEMENT_NODE) {
  - focusNode = focusNode.childNodes[0];
  + node = node.childNodes[0];
  }
  }
  + console.log("setting caret", caretPosition, node);
  const sel = document.getSelection();
  sel.removeAllRanges();
  const range = document.createRange();
  - range.setStart(focusNode, caretPosition.offset);
  + range.setStart(node, caretPosition.offset);
  range.collapse(true);
  sel.addRange(range);
  }
  -}
  