input-events-get-target-ranges.js

"use strict";

// TODO: extend `EditorTestUtils` in editing/include/edit-test-utils.mjs

const kBackspaceKey = "\uE003";
const kDeleteKey = "\uE017";
const kArrowRight = "\uE014";
const kArrowLeft = "\uE012";
const kShift = "\uE008";
const kMeta = "\uE03d";
const kControl = "\uE009";
const kAlt = "\uE00A";
const kKeyA = "a";

const kImgSrc =
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVR42mNgaGD4D8YwBgAw9AX9Y9zBwwAAAABJRU5ErkJggg==";

let gSelection, gEditor, gBeforeinput, gInput;

function initializeTest(aInnerHTML) {
  function onBeforeinput(event) {
    // NOTE: Blink makes `getTargetRanges()` return empty range after
    //       propagation, but this test wants to check the result during
    //       propagation.  Therefore, we need to cache the result, but will
    //       assert if `getTargetRanges()` returns different ranges after
    //       checking the cached ranges.
    event.cachedRanges = event.getTargetRanges();
    gBeforeinput.push(event);
  }
  function onInput(event) {
    event.cachedRanges = event.getTargetRanges();
    gInput.push(event);
  }
  if (gEditor !== document.querySelector("div[contenteditable]")) {
    if (gEditor) {
      gEditor.isListeningToInputEvents = false;
      gEditor.removeEventListener("beforeinput", onBeforeinput);
      gEditor.removeEventListener("input", onInput);
    }
    gEditor = document.querySelector("div[contenteditable]");
  }
  gSelection = getSelection();
  gBeforeinput = [];
  gInput = [];
  if (!gEditor.isListeningToInputEvents) {
    gEditor.isListeningToInputEvents = true;
    gEditor.addEventListener("beforeinput", onBeforeinput);
    gEditor.addEventListener("input", onInput);
  }

  setupEditor(aInnerHTML);
  gBeforeinput = [];
  gInput = [];
}

function getArrayOfRangesDescription(arrayOfRanges) {
  if (arrayOfRanges === null) {
    return "null";
  }
  if (arrayOfRanges === undefined) {
    return "undefined";
  }
  if (!Array.isArray(arrayOfRanges)) {
    return "Unknown Object";
  }
  if (arrayOfRanges.length === 0) {
    return "[]";
  }
  let result = "[";
  for (let range of arrayOfRanges) {
    result += `{${getRangeDescription(range)}},`;
  }
  result += "]";
  return result;
}

function getRangeDescription(range) {
  function getNodeDescription(node) {
    if (!node) {
      return "null";
    }
    switch (node.nodeType) {
      case Node.TEXT_NODE:
      case Node.COMMENT_NODE:
      case Node.CDATA_SECTION_NODE:
        return `${node.nodeName} "${node.data}"`;
      case Node.ELEMENT_NODE:
        return `<${node.nodeName.toLowerCase()}>`;
      default:
        return `${node.nodeName}`;
    }
  }
  if (range === null) {
    return "null";
  }
  if (range === undefined) {
    return "undefined";
  }
  return range.startContainer == range.endContainer &&
    range.startOffset == range.endOffset
    ? `(${getNodeDescription(range.startContainer)}, ${range.startOffset})`
    : `(${getNodeDescription(range.startContainer)}, ${
        range.startOffset
      }) - (${getNodeDescription(range.endContainer)}, ${range.endOffset})`;
}

function sendDeleteKey(modifier) {
  if (!modifier) {
    return new test_driver.Actions()
      .keyDown(kDeleteKey)
      .keyUp(kDeleteKey)
      .send();
  }
  return new test_driver.Actions()
    .keyDown(modifier)
    .keyDown(kDeleteKey)
    .keyUp(kDeleteKey)
    .keyUp(modifier)
    .send();
}

function sendBackspaceKey(modifier) {
  if (!modifier) {
    return new test_driver.Actions()
      .keyDown(kBackspaceKey)
      .keyUp(kBackspaceKey)
      .send();
  }
  return new test_driver.Actions()
    .keyDown(modifier)
    .keyDown(kBackspaceKey)
    .keyUp(kBackspaceKey)
    .keyUp(modifier)
    .send();
}

function sendKeyA() {
  return new test_driver.Actions()
    .keyDown(kKeyA)
    .keyUp(kKeyA)
    .send();
}

function sendArrowLeftKey() {
  return new test_driver.Actions()
    .keyDown(kArrowLeft)
    .keyUp(kArrowLeft)
    .send();
}

function sendArrowRightKey() {
  return new test_driver.Actions()
    .keyDown(kArrowRight)
    .keyUp(kArrowRight)
    .send();
}

function checkGetTargetRangesOfBeforeinputOnDeleteSomething(expectedRanges) {
  assert_equals(
    gBeforeinput.length,
    1,
    "One beforeinput event should be fired if the key operation tries to delete something"
  );
  assert_true(
    Array.isArray(gBeforeinput[0].cachedRanges),
    "gBeforeinput[0].getTargetRanges() should return an array of StaticRange instances at least during propagation"
  );
  let arrayOfExpectedRanges = Array.isArray(expectedRanges)
    ? expectedRanges
    : [expectedRanges];
  // Before checking the length of array of ranges, we should check the given
  // range first because the ranges are more important than whether there are
  // redundant additional unexpected ranges.
  for (
    let i = 0;
    i <
    Math.max(arrayOfExpectedRanges.length, gBeforeinput[0].cachedRanges.length);
    i++
  ) {
    assert_equals(
      getRangeDescription(gBeforeinput[0].cachedRanges[i]),
      getRangeDescription(arrayOfExpectedRanges[i]),
      `gBeforeinput[0].getTargetRanges()[${i}] should return expected range (inputType is "${gBeforeinput[0].inputType}")`
    );
  }
  assert_equals(
    gBeforeinput[0].cachedRanges.length,
    arrayOfExpectedRanges.length,
    `getTargetRanges() of beforeinput event should return ${arrayOfExpectedRanges.length} ranges`
  );
}

function checkGetTargetRangesOfInputOnDeleteSomething() {
  assert_equals(
    gInput.length,
    1,
    "One input event should be fired if the key operation deletes something"
  );
  // https://github.com/w3c/input-events/issues/113
  assert_true(
    Array.isArray(gInput[0].cachedRanges),
    "gInput[0].getTargetRanges() should return an array of StaticRange instances at least during propagation"
  );
  assert_equals(
    gInput[0].cachedRanges.length,
    0,
    "gInput[0].getTargetRanges() should return empty array during propagation"
  );
}

function checkGetTargetRangesOfInputOnDoNothing() {
  assert_equals(
    gInput.length,
    0,
    "input event shouldn't be fired when the key operation does not cause modifying the DOM tree"
  );
}

function checkBeforeinputAndInputEventsOnNOOP() {
  assert_equals(
    gBeforeinput.length,
    0,
    "beforeinput event shouldn't be fired when the key operation does not cause modifying the DOM tree"
  );
  assert_equals(
    gInput.length,
    0,
    "input event shouldn't be fired when the key operation does not cause modifying the DOM tree"
  );
}

function checkEditorContentResultAsSubTest(
  expectedResult,
  description,
  options = {}
) {
  test(() => {
    if (Array.isArray(expectedResult)) {
      assert_in_array(
        options.ignoreWhiteSpaceDifference
          ? gEditor.innerHTML.replace(/&nbsp;/g, " ")
          : gEditor.innerHTML,
        expectedResult
      );
    } else {
      assert_equals(
        options.ignoreWhiteSpaceDifference
          ? gEditor.innerHTML.replace(/&nbsp;/g, " ")
          : gEditor.innerHTML,
        expectedResult
      );
    }
  }, `${description} - comparing innerHTML`);
}

// Similar to `setupDiv` in editing/include/tests.js, this method sets
// innerHTML value of gEditor, and sets multiple selection ranges specified
// with the markers.
// - `[` specifies start boundary in a text node
// - `{` specifies start boundary before a node
// - `]` specifies end boundary in a text node
// - `}` specifies end boundary after a node
function setupEditor(innerHTMLWithRangeMarkers) {
  const startBoundaries = innerHTMLWithRangeMarkers.match(/\{|\[/g) || [];
  const endBoundaries = innerHTMLWithRangeMarkers.match(/\}|\]/g) || [];
  if (startBoundaries.length !== endBoundaries.length) {
    throw "Should match number of open/close markers";
  }

  gEditor.innerHTML = innerHTMLWithRangeMarkers;
  gEditor.focus();

  if (startBoundaries.length === 0) {
    // Don't remove the range for now since some tests may assume that
    // setting innerHTML does not remove all selection ranges.
    return;
  }

  function getNextRangeAndDeleteMarker(startNode) {
    function getNextLeafNode(node) {
      function inclusiveDeepestFirstChildNode(container) {
        while (container.firstChild) {
          container = container.firstChild;
        }
        return container;
      }
      if (node.hasChildNodes()) {
        return inclusiveDeepestFirstChildNode(node);
      }
      if (node.nextSibling) {
        return inclusiveDeepestFirstChildNode(node.nextSibling);
      }
      let nextSibling = (function nextSiblingOfAncestorElement(child) {
        for (
          let parent = child.parentElement;
          parent && parent != gEditor;
          parent = parent.parentElement
        ) {
          if (parent.nextSibling) {
            return parent.nextSibling;
          }
        }
        return null;
      })(node);
      if (!nextSibling) {
        return null;
      }
      return inclusiveDeepestFirstChildNode(nextSibling);
    }
    function scanMarkerInTextNode(textNode, offset) {
      return /[\{\[\]\}]/.exec(textNode.data.substr(offset));
    }
    let startMarker = (function scanNextStartMaker(
      startContainer,
      startOffset
    ) {
      function scanStartMakerInTextNode(textNode, offset) {
        let scanResult = scanMarkerInTextNode(textNode, offset);
        if (scanResult === null) {
          return null;
        }
        if (scanResult[0] === "}" || scanResult[0] === "]") {
          throw "An end marker is found before a start marker";
        }
        return {
          marker: scanResult[0],
          container: textNode,
          offset: scanResult.index + offset
        };
      }
      if (startContainer.nodeType === Node.TEXT_NODE) {
        let scanResult = scanStartMakerInTextNode(startContainer, startOffset);
        if (scanResult !== null) {
          return scanResult;
        }
      }
      let nextNode = startContainer;
      while ((nextNode = getNextLeafNode(nextNode))) {
        if (nextNode.nodeType === Node.TEXT_NODE) {
          let scanResult = scanStartMakerInTextNode(nextNode, 0);
          if (scanResult !== null) {
            return scanResult;
          }
          continue;
        }
      }
      return null;
    })(startNode, 0);
    if (startMarker === null) {
      return null;
    }
    let endMarker = (function scanNextEndMarker(startContainer, startOffset) {
      function scanEndMarkerInTextNode(textNode, offset) {
        let scanResult = scanMarkerInTextNode(textNode, offset);
        if (scanResult === null) {
          return null;
        }
        if (scanResult[0] === "{" || scanResult[0] === "[") {
          throw "A start marker is found before an end marker";
        }
        return {
          marker: scanResult[0],
          container: textNode,
          offset: scanResult.index + offset
        };
      }
      if (startContainer.nodeType === Node.TEXT_NODE) {
        let scanResult = scanEndMarkerInTextNode(startContainer, startOffset);
        if (scanResult !== null) {
          return scanResult;
        }
      }
      let nextNode = startContainer;
      while ((nextNode = getNextLeafNode(nextNode))) {
        if (nextNode.nodeType === Node.TEXT_NODE) {
          let scanResult = scanEndMarkerInTextNode(nextNode, 0);
          if (scanResult !== null) {
            return scanResult;
          }
          continue;
        }
      }
      return null;
    })(startMarker.container, startMarker.offset + 1);
    if (endMarker === null) {
      throw "Found an open marker, but not found corresponding close marker";
    }
    function indexOfContainer(container, child) {
      let offset = 0;
      for (let node = container.firstChild; node; node = node.nextSibling) {
        if (node == child) {
          return offset;
        }
        offset++;
      }
      throw "child must be a child node of container";
    }
    (function deleteFoundMarkers() {
      function removeNode(node) {
        let container = node.parentElement;
        let offset = indexOfContainer(container, node);
        node.remove();
        return { container, offset };
      }
      if (startMarker.container == endMarker.container) {
        // If the text node becomes empty, remove it and set collapsed range
        // to the position where there is the text node.
        if (startMarker.container.length === 2) {
          if (!/[\[\{][\]\}]/.test(startMarker.container.data)) {
            throw `Unexpected text node (data: "${startMarker.container.data}")`;
          }
          let { container, offset } = removeNode(startMarker.container);
          startMarker.container = endMarker.container = container;
          startMarker.offset = endMarker.offset = offset;
          startMarker.marker = endMarker.marker = "";
          return;
        }
        startMarker.container.data = `${startMarker.container.data.substring(
          0,
          startMarker.offset
        )}${startMarker.container.data.substring(
          startMarker.offset + 1,
          endMarker.offset
        )}${startMarker.container.data.substring(endMarker.offset + 1)}`;
        if (startMarker.offset >= startMarker.container.length) {
          startMarker.offset = endMarker.offset = startMarker.container.length;
          return;
        }
        endMarker.offset--; // remove the start marker's length
        if (endMarker.offset > endMarker.container.length) {
          endMarker.offset = endMarker.container.length;
        }
        return;
      }
      if (startMarker.container.length === 1) {
        let { container, offset } = removeNode(startMarker.container);
        startMarker.container = container;
        startMarker.offset = offset;
        startMarker.marker = "";
      } else {
        startMarker.container.data = `${startMarker.container.data.substring(
          0,
          startMarker.offset
        )}${startMarker.container.data.substring(startMarker.offset + 1)}`;
      }
      if (endMarker.container.length === 1) {
        let { container, offset } = removeNode(endMarker.container);
        endMarker.container = container;
        endMarker.offset = offset;
        endMarker.marker = "";
      } else {
        endMarker.container.data = `${endMarker.container.data.substring(
          0,
          endMarker.offset
        )}${endMarker.container.data.substring(endMarker.offset + 1)}`;
      }
    })();
    (function handleNodeSelectMarker() {
      if (startMarker.marker === "{") {
        if (startMarker.offset === 0) {
          // The range start with the text node.
          let container = startMarker.container.parentElement;
          startMarker.offset = indexOfContainer(
            container,
            startMarker.container
          );
          startMarker.container = container;
        } else if (startMarker.offset === startMarker.container.data.length) {
          // The range start after the text node.
          let container = startMarker.container.parentElement;
          startMarker.offset =
            indexOfContainer(container, startMarker.container) + 1;
          startMarker.container = container;
        } else {
          throw 'Start marker "{" is allowed start or end of a text node';
        }
      }
      if (endMarker.marker === "}") {
        if (endMarker.offset === 0) {
          // The range ends before the text node.
          let container = endMarker.container.parentElement;
          endMarker.offset = indexOfContainer(container, endMarker.container);
          endMarker.container = container;
        } else if (endMarker.offset === endMarker.container.data.length) {
          // The range ends with the text node.
          let container = endMarker.container.parentElement;
          endMarker.offset =
            indexOfContainer(container, endMarker.container) + 1;
          endMarker.container = container;
        } else {
          throw 'End marker "}" is allowed start or end of a text node';
        }
      }
    })();
    let range = document.createRange();
    range.setStart(startMarker.container, startMarker.offset);
    range.setEnd(endMarker.container, endMarker.offset);
    return range;
  }

  let ranges = [];
  for (
    let range = getNextRangeAndDeleteMarker(gEditor.firstChild);
    range;
    range = getNextRangeAndDeleteMarker(range.endContainer)
  ) {
    ranges.push(range);
  }

  gSelection.removeAllRanges();
  for (let range of ranges) {
    gSelection.addRange(range);
  }

  if (gSelection.rangeCount != ranges.length) {
    throw `Failed to set selection to the given ranges whose length is ${ranges.length}, but only ${gSelection.rangeCount} ranges are added`;
  }
}