TypeScript Editor.toDataNode方法代码示例

  it("doing an attribute deletion changes the data", () => {
    const p = ps[7];
    const dataP = editor.toDataNode(p) as Element;
    const attrNames = getAttributeNamesFor(p);
    let attrValues = getAttributeValuesFor(p);
    const initialLength = attrValues.length;
    assert.isTrue(initialLength > 0, "the paragraph should have attributes");
    const attr = editor.toDataNode(attrValues[0]) as Attr;
    const decodedName = attrNames[0].textContent!;
    const trs = editor.modeTree.getMode(attr).getContextualActions(
      ["delete-attribute"], decodedName, attr);

    caretManager.setCaret(attr, 0);
    caretCheck(editor, attrValues[0].firstChild!, 0,
               "the caret should be in the attribute");
    trs[0].execute({ node: attr, name: decodedName });
    attrValues = getAttributeValuesFor(p);
    assert.equal(attrValues.length, initialLength - 1,
                 "one attribute should be gone");
    caretCheck(editor, attrValues[0].firstChild!, 0,
               "the caret should be in the first attribute value");

    assert.isNull(attr.ownerElement,
                  "the old attribute should not have an onwer element");
    assert.isNull(dataP.getAttribute(attr.name));
  });

     () => {
       // Text node inside title.
       const p = ps[8];
       const initial = getAttributeValuesFor(p)[0].firstChild as Text;
       caretManager.setCaret(initial, 3);
       assert.equal(initial.data, "abc");
       editor.type(keyConstants.BACKSPACE);
       editor.type(keyConstants.BACKSPACE);
       editor.type(keyConstants.BACKSPACE);

       // We have to refetch because the decorations have been redone.
       let laterValue = getAttributeValuesFor(p)[0];
       assert.isTrue((laterValue.firstChild as Element)
                     .classList.contains("_placeholder"));
       assert.equal(laterValue.childNodes.length, 1);
       caretCheck(editor, laterValue.firstChild!, 0, "caret after deletion");

       // Check that the data is also modified
       let dataNode = editor.toDataNode(laterValue) as Attr;
       assert.equal(dataNode.value, "");

       // Overdeleting
       editor.type(keyConstants.BACKSPACE);

       laterValue = getAttributeValuesFor(p)[0];
       assert.isTrue((laterValue.firstChild as Element)
                     .classList.contains("_placeholder"));
       assert.equal(laterValue.childNodes.length, 1);
       caretCheck(editor, laterValue.firstChild!, 0, "caret after deletion");

       // Check that the data is also modified
       dataNode = editor.toDataNode(laterValue) as Attr;
       assert.equal(dataNode.value, "");
     });

  it("undoing an attribute value change undoes the value change", () => {
    let initial = getAttributeValuesFor(ps[7])[0].firstChild as Text;
    caretManager.setCaret(initial, 4);
    assert.equal(initial.data, "rend_value", "initial value");
    editor.type("blah");

    // We have to refetch because the decorations have been redone.
    initial = getAttributeValuesFor(ps[7])[0].firstChild as Text;
    assert.equal(initial.data, "rendblah_value");
    caretCheck(editor, initial, 8, "caret after text insertion");

    // Check that the data is also modified
    const dataNode = editor.toDataNode(initial) as Attr;
    assert.equal(dataNode.value, "rendblah_value");

    editor.undo();

    // We have to refetch because the decorations have been redone.
    initial = getAttributeValuesFor(ps[7])[0].firstChild as Text;
    assert.equal(initial.data, "rend_value");
    caretCheck(editor, initial, 4, "caret after undo");

    // Check that the data change has been undone.
    assert.equal(dataNode.value, "rend_value", "value undone");
  });

  itNoIE("proper caret position for elements that span lines", () => {
    const p = editor.dataRoot.querySelectorAll("body>p")[5];

    // Check that we are testing what we want to test. The end label for the hi
    // element must be on the next line. If we don't have that condition yet,
    // we modify the document to create the condition we want.
    let textLoc: DLoc;
    let hi: Element;
    // This is extremely high on purpose. We don't want to have an arbitrarily
    // low number that will cause issues *sometimes*.
    let tries = 1000;
    let satisfied = false;
    // tslint:disable-next-line:no-constant-condition
    while (true) {
      tries--;
      textLoc = caretManager.fromDataLocation(p.lastChild!, 2)!;
      assert.equal(textLoc.node.nodeType, Node.TEXT_NODE);
      const his =
        (textLoc.node.parentNode as Element).getElementsByClassName("hi");
      hi = his[his.length - 1];
      const startRect = firstGUI(hi)!.getBoundingClientRect();
      const endRect = lastGUI(hi)!.getBoundingClientRect();
      if (endRect.top > startRect.top + startRect.height) {
        satisfied = true;
        break;
      }
      if (tries === 0) {
        break;
      }
      editor.dataUpdater.insertText(editor.toDataNode(hi)!, 0, "AA");
    }

    assert.isTrue(satisfied,
                  "PRECONDITION FAILED: the test is unable to establish the \
necessary precondition");

    hi.scrollIntoView(true);
    const event = new $.Event("mousedown");
    event.target = textLoc.node.parentNode as Element;
    const { range } = textLoc.makeRange(textLoc.make(textLoc.node, 3))!;
    const { top, bottom, left } = range.getBoundingClientRect();
    event.clientX = left;
    event.clientY = (top + bottom) / 2;
    event.pageX = event.clientX + editor.window.document.body.scrollLeft;
    event.pageY = event.clientY + editor.window.document.body.scrollTop;
    event.which = 1; // First mouse button.
    editor.$guiRoot.trigger(event);
    caretCheck(editor, textLoc.node, textLoc.offset,
               "the caret should be in the text node");
  });

  it("typing multiple spaces in an attribute normalizes the space", () => {
    // Text node inside title.
    let initial = getAttributeValuesFor(ps[7])[0].firstChild as Text;
    caretManager.setCaret(initial, 0);
    assert.equal(initial.data, "rend_value");

    editor.type(" ");

    // We have to refetch because the decorations have been redone.
    initial = getAttributeValuesFor(ps[7])[0].firstChild as Text;
    assert.equal(initial.data, " rend_value");
    caretCheck(editor, initial, 1, "caret after text insertion");

    // Check that the data is also modified
    const dataNode = editor.toDataNode(initial) as Attr;
    assert.equal(dataNode.value, " rend_value");

    editor.type(" ");

    // We have to refetch because the decorations have been redone.
    initial = getAttributeValuesFor(ps[7])[0].firstChild as Text;
    assert.equal(initial.data, " rend_value");
    caretCheck(editor, initial, 1, "caret after text insertion");

    // Check that the data is also modified
    assert.equal(dataNode.value, " rend_value");

    caretManager.setCaret(initial, 11);

    editor.type(" ");

    // We have to refetch because the decorations have been redone.
    initial = getAttributeValuesFor(ps[7])[0].firstChild as Text;
    assert.equal(initial.data, " rend_value ");
    caretCheck(editor, initial, 12, "caret after text insertion");

    // Check that the data is also modified
    assert.equal(dataNode.value, " rend_value ");

    editor.type(" ");

    // We have to refetch because the decorations have been redone.
    initial = getAttributeValuesFor(ps[7])[0].firstChild as Text;
    assert.equal(initial.data, " rend_value ");
    caretCheck(editor, initial, 12, "caret after text insertion");

    // Check that the data is also modified
    assert.equal(dataNode.value, " rend_value ");
  });

      it("replaces text", () => {
        const sr = makeSr();
        sr.updatePattern("abc", {
          direction: Direction.FORWARD,
          context: Context.EVERYWHERE,
        });

        expect(sr).to.have.property("current").to
          .satisfy(equalRanges.bind(undefined, pFiveFirstThree));
        const pGUI = pFiveFirstThree.start.node.parentNode!;
        const p = editor.toDataNode(pGUI);
        expect(p).to.have.property("textContent").equal("abcdefghij");

        sr.replace("x");
        expect(p).to.have.property("textContent").equal("xdefghij");
      });