TypeScript caret-manager.CaretManager類代碼示例

  beforeEach(() => {
    dataRoot = editor.dataRoot;
    caretManager = editor.caretManager;

    ps = Array.from(dataRoot.querySelectorAll("body p"));
    firstBodyP = ps[0];
    firstBodyPLocation = caretManager.mustFromDataLocation(
      DLoc.mustMakeDLoc(dataRoot, firstBodyP, 0));
    caretManager.setCaret(firstBodyPLocation);

    // First 3 text characters in the 5th paragraph (at index 4).
    const pFiveStart = DLoc.mustMakeDLoc(dataRoot, ps[4].firstChild, 0);
    pFiveFirstThree = new DLocRange(
      caretManager.mustFromDataLocation(pFiveStart),
      caretManager.mustFromDataLocation(pFiveStart.makeWithOffset(3)));
    expect(pFiveFirstThree.mustMakeDOMRange().toString()).to.equal("abc");

    pFiveFirstFour = new DLocRange(
      caretManager.mustFromDataLocation(pFiveStart),
      caretManager.mustFromDataLocation(pFiveStart.makeWithOffset(4)));
    expect(pFiveFirstFour.mustMakeDOMRange().toString()).to.equal("abcd");

    const pSevenStart = DLoc.mustMakeDLoc(dataRoot, ps[6].firstChild, 0);
    pSevenFirstThree = new DLocRange(
      caretManager.mustFromDataLocation(pSevenStart),
      caretManager.mustFromDataLocation(pSevenStart.makeWithOffset(3)));
    expect(pSevenFirstThree.mustMakeDOMRange().toString()).to.equal("abc");

    // This is the first "abc" found when doing a TEXT search.
    firstABCText = new DLocRange(
      caretManager.mustFromDataLocation(ps[3].firstChild!.firstChild!, 0),
      caretManager.mustFromDataLocation(ps[3].lastChild!, 1));
  });

  it("prevents pasting in readonly elements and attributes", () => {
    const initial = editor.dataRoot.querySelector("bar")!;
    const initialGUI =
      caretManager.fromDataLocation(initial, 0)!.node as Element;
    assert.isTrue(initialGUI.classList.contains("_readonly"));
    caretManager.setCaret(initial, 0);
    const initialValue = initial.textContent;

    // Synthetic event
    let event = makeFakePasteEvent({
      types: ["text/plain"],
      getData: () => "a",
    });
    editor.$guiRoot.trigger(event);
    assert.equal(initial.textContent, initialValue);
    dataCaretCheck(editor, initial, 0, "final position");

    // Check that removing _readonly would make the paste work. This proves that
    // the only thing that was preventing pasting was _readonly.
    initialGUI.classList.remove("_readonly");
    caretManager.setCaret(initial, 0);

    // We have to create a new event.
    event = makeFakePasteEvent({
      types: ["text/plain"],
      getData: () => "a",
    });

    editor.$guiRoot.trigger(event);
    assert.equal(initial.textContent, `a${initialValue}`);
    dataCaretCheck(editor, initial.firstChild!, 1, "final position");
  });

  it("prevents cutting from readonly elements", async () => {
    const initial = editor.dataRoot.querySelector("bar")!;
    const initialGUI =
      caretManager.fromDataLocation(initial, 0)!.node as Element;
    assert.isTrue(initialGUI.classList.contains("_readonly"));
    const initialValue = initial.textContent!;

    const guiStart = caretManager.fromDataLocation(initial.firstChild!, 1)!;
    caretManager.setCaret(guiStart);
    caretManager.setRange(
      guiStart,
      caretManager.fromDataLocation(initial.firstChild!, 2)!);

    // Synthetic event
    editor.$guiRoot.trigger(new $.Event("cut"));
    await delay(1);

    assert.equal(initial.textContent, initialValue);
    // Try again, after removing _readonly so that we prove the only reason the
    // cut did not work is that _readonly was present.
    initialGUI.classList.remove("_readonly");
    editor.$guiRoot.trigger(new $.Event("cut"));

    await delay(1);
    assert.equal(initial.textContent,
                 initialValue.slice(0, 1) + initialValue.slice(2));
  });

  it("moving the caret scrolls the pane", (done) => {
    const initial = editor.dataRoot;
    caretManager.setCaret(initial.firstChild, 0);

    // tslint:disable-next-line:no-any
    const scroller = (editor as any).scroller;

    const initialScroll = scroller.scrollTop;

    scroller.events.pipe(first()).subscribe(() => {
      // We need to wait until the scroller has fired the scroll event.
      assert.isTrue(initialScroll < scroller.scrollTop);
      const caretRect = editor.caretManager.mark.getBoundingClientRect();
      const scrollerRect = scroller.getBoundingClientRect();
      assert.equal(distFromRect(caretRect.left, caretRect.top,
                                scrollerRect.left, scrollerRect.top,
                                scrollerRect.right,
                                scrollerRect.bottom),
                   0, "caret should be in visible space");
      done();
    });

    caretManager.setCaret(initial.firstChild,
                          initial.firstChild!.childNodes.length);
  });

  it("handles cutting a bad selection", (done) => {
    const p = editor.dataRoot.querySelector("body>p")!;
    const originalInnerHtml = p.innerHTML;
    // Start caret is inside the term element.
    const guiStart =
      caretManager.fromDataLocation(p.childNodes[1].firstChild!, 1)!;
    const guiEnd = caretManager.fromDataLocation(p.childNodes[2], 5)!;
    caretManager.setRange(guiStart, guiEnd);

    assert.equal(p.innerHTML, originalInnerHtml);
    const straddlingModal = editor.modals.getModal("straddling");
    const $top = straddlingModal.getTopLevel();
    $top.one("shown.bs.modal", () => {
      // Wait until visible to add this handler so that it is run after the
      // callback that wed sets on the modal.
      $top.one("hidden.bs.modal", () => {
        assert.equal(p.innerHTML, originalInnerHtml);
        caretCheck(editor, guiEnd.node, guiEnd.offset, "final position");
        done();
      });
    });
    // Synthetic event
    const event = new $.Event("cut");
    editor.$guiRoot.trigger(event);
    // This clicks dismisses the modal
    straddlingModal.getTopLevel().find(".btn-primary")[0].click();
  });

  it("unwraps elements", () => {
    const initial = editor.dataRoot.getElementsByTagName("title")[0];

    // Make sure we are looking at the right thing.
    assert.equal(initial.childNodes.length, 1);
    assert.equal(initial.firstChild!.textContent, "abcd");
    caretManager.setCaret(initial, 0);
    let caret = caretManager.getNormalizedCaret()!;
    assert.equal(caret.node.childNodes[caret.offset].nodeValue, "abcd");

    let trs = editor.modeTree.getMode(initial)
      .getContextualActions(["wrap"], "hi", initial, 0);

    caretManager.setCaret(initial.firstChild, 1);
    caret = caretManager.getNormalizedCaret()!;
    caretManager.setRange(caret, caret.makeWithOffset(caret.offset + 2));

    trs[0].execute({ node: undefined, name: "hi" });

    const node = initial.getElementsByTagName("hi")[0];
    trs = editor.modeTree.getMode(node).getContextualActions(["unwrap"], "hi",
                                                             node, 0);

    trs[0].execute({ node, element_name: "hi" });
    assert.equal(initial.childNodes.length, 1, "length after unwrap");
    assert.equal(initial.firstChild!.textContent, "abcd");
  });

 () => {
   const elName = getElementNameFor(ps[7]);
   const before = caretManager.makeCaret(elName, 0);
   const after = caretManager.newPosition(before, "left")!;
   const parent = ps[7].parentNode!;
   assert.equal(after.node, parent);
   assert.equal(after.offset, indexOf(parent.childNodes, ps[7]));
 });

 () => {
   const firstGUIEl =
     editor.guiRoot.getElementsByClassName("__start_label")[0];
   const elName = firstGUIEl.getElementsByClassName("_element_name")[0];
   const before = caretManager.makeCaret(elName.firstChild, 1);
   const after = caretManager.newPosition(before, "left")!;
   assert.equal(after.node, elName);
   assert.equal(after.offset, 0);
 });