<div class="ce-example">

    <div class="ce-example__content _ce-example__content--small">
      <div id="editorjs"></div>
    </div>
    <div class="ce-example__output">
      <pre class="ce-example__output-content" id="output"></pre>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@2.17.0/dist/editor.min.js"></script> <!-- EditorJs -->
  <script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script><!-- Header -->
  <script src="https://cdn.jsdelivr.net/npm/@editorjs/paragraph@latest"></script><!-- Paragraph -->

.ce-paragraph {
  margin-bottom: 1rem;
}

@media screen and (max-width: 650px) {
  .ce-paragraph[data-placeholder]:empty::before {
    opacity: 1 !important;
  }
}

/* Вот это для файлов на вкладке "фото" */
.krajee-default.file-preview-frame .file-thumbnail-footer {
  height: 45px;
}
.krajee-default .file-footer-caption {
  margin-bottom: 0;
}

.file-thumbnail-footer .file-upload-indicator {
  display: none;
}

class Custom {
  constructor({ data, api }) {
    this.data = data;
    this.api = api;
  }

  render() {
    if (!this.container) {
      this.container = document.createElement("div");
      this.container.classList.add("custom");
    }

    this.container.innerText = this.data.text;
    return this.container;
  }

  save() {
    return this.data;
  }
}

/**
 * To initialize the Editor, create a new instance with configuration object
 * @see docs/installation.md for mode details
 */
var editor = new EditorJS({
  /* Вот эти 2 строчки в js */
  placeholder: "Ваш текст...",
  autofocus: true,

  holder: "editorjs",
  logLevel: "ERROR",
  /**
   * Tools list
   */
  tools: {
    header: {
      class: Header,
      inlineToolbar: ["link"],
      config: {
        placeholder: "Заголовок"
      },
      shortcut: "CMD+SHIFT+H"
    },
    custom: {
      class: Custom
    }
  },
  /**
   * Initial Editor data
   */
  data: {
    blocks: [
      {
        type: "header",
        data: {
          text: "Editor.js",
          level: 2
        }
      },
      {
        type: "paragraph",
        data: {
          text:
            "Hey. Meet the new Editor. On this page you can see it in action — try to edit this text. Source code of the page contains the example of connection and configuration."
        }
      },
      {
        type: "custom",
        data: {
          text: "Hello World"
        }
      }
    ]
  },
  onReady: function () {
    // saveButton.click();
    let toolBtns = document.querySelectorAll("[data-tool]");

    toolBtns.forEach((el) =>
      el.addEventListener("click", function () {
        editor.caret.setToLastBlock();
      })
    );
  },
  onChange: function () {
    // console.log(editor.caret);
    // console.log(editor.blocks.getCurrentBlockIndex())
    // editor.caret.setToBlock(editor.blocks.getCurrentBlockIndex(), "end");
    // console.log(editor.on('focus'));
  }
});