в уроке 2.3 создание административной панели ,к элементам не добавляется свойство contentEditable

пытался использовать другой перебор вместо foreach использовал map-не помогло,вместо contentDocument использовал contentWindow.document,помогло частично - в консоли эти элементы появились с нужным свойством,но в дереве - нет ,еще перенес все в последний then из метода enableEditing()

import "../../helpers/iframeLoader.js";
import axios from "axios";
import React, { Component } from "react";
/* import { useState, useEffect } from "react"; */
export default class Editor extends Component {
  constructor() {
    super();
    this.currentPage = "index.html";
    this.state = {
      pageList: [],
      newPageName: "",
    };
    this.createNewPage = this.createNewPage.bind(this);
  }
  componentDidMount() {
    this.init(this.currentPage);
  }

  init(page) {
    this.iframe = document.querySelector("iframe");
    this.open(page);
    this.loadPageList();
  }

  open(page) {
    this.currentPage = `../${page}?rnd=${Math.random()}`;
    axios
      .get(`../${page}`)
      .then((res) => this.parseStringToDom(res.data))
      .then(this.wrapTextNodes)
      .then((dom) => {
        this.virtualDom = dom;
        return dom;
      })
      .then(this.serializeDomToString)
      .then((html) => axios.post("./api/saveTempPage.php", { html }))
      .then(() => {
        this.iframe.load("../temp.html");
        this.iframe.contentWindow.document.body
          .querySelectorAll("text-editor")
          .forEach((element) => {
            console.log(element);
            element.contentEditable = "true";
          });
        console.log(
          this.iframe.contentWindow.document.body.querySelectorAll(
            "text-editor"
          )
        );

        /* console.log(this.virtualDom); */
      });
    /* .then(() => {
        this.enableEditing();
      }); */
  }
  enableEditing() {}
  parseStringToDom(str) {
    const parser = new DOMParser();
    return parser.parseFromString(str, "text/html");
  }
  wrapTextNodes(dom) {
    const body = dom.body;
    let textNodes = [];
    function recursy(element) {
      element.childNodes.forEach((node) => {
        if (
          node.nodeName === "#text" &&
          node.nodeValue.replace(/\s+/g, "").length > 0
        ) {
          textNodes.push(node);
        } else {
          recursy(node);
        }
      });
      return dom;
    }
    recursy(body);
    textNodes.forEach((node, i) => {
      const wraper = dom.createElement("text-editor");
      node.parentNode.replaceChild(wraper, node);
      wraper.appendChild(node);
      wraper.setAttribute("nodeid", i);
    });
    return dom;
  }
  serializeDomToString(dom) {
    const seriaizer = new XMLSerializer();
    return seriaizer.serializeToString(dom);
  }
  loadPageList() {
    axios.get("./api/").then((res) => this.setState({ pageList: res.data }));
  }
  createNewPage() {
    axios
      .post("./api/createNewPage.php", { name: this.state.newPageName })
      .then(this.loadPageList())
      .catch(() => {
        alert("Страница уже существует");
      });
  }
  deletePage(page) {
    axios
      .post("./api/deletePage.php", { name: page })
      .then(this.loadPageList())
      .catch(() => {
        alert("Страница не существует");
      });
  }
  render() {
    /* const { pageList } = this.state;
    const pages = pageList.map((page, i) => {
      return (
        <h1 key={i}>
          {page}
          <a href="#" onClick={() => this.deletePage(page)}>
            (x)
          </a>
        </h1>
      );
    });  */
    return <iframe src={this.currentPage} frameBorder="0"></iframe>;
  }
}