Limiting Instance to One Block Style

[ghost]

I want to have a title section on my edit page that only accepts a Header block. This is the code that I have used to implement that:

const titleEditor = new EditorJS({
  // autofocus: true,
  placeholder: "Enter a title...",
  holderId: "title-editor",
  tools: {
    header: {
      class: Header,
      shortcut: "CMD+SHIFT+H",
      config: {
        placeholder: "Enter a Header..."
      }
    }
  }
});

Now, this basically works like I want. However, it allows me to add multiple titles in that editor. That is, if I type a header and hit return, I can then get the plus icon which allows me to add another header --- and another, etc.

But I don't want that. I want one single header for the page.

How can I modify my code so that I can limit the number of block instances to one?

[rmlamarche]

This would sort of defeat the purpose of a "block style editor"

The same effect can be achieved using:

<h1 contenteditable="true"></h1>

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content

[mlexs]

We needed to add a custom block type (hero image) and this block could only be used once per each page the editor was on (a page with multiple hero images is rather awkward looking one, isn't it?).

We did commit some horrible, hacky lines (but it works!):

editor = new EditorJS({
    ...
    onChange: (api, event) => {
        // new hero block was added
        if (event.type === "block-added" && event.detail.target.name === "hero") {
            // check if block of this type exists within editor
            if (document.querySelectorAll(".ce-hero").length > 1) {
                // get newly added block
                var idx  = api.blocks.getBlockIndex(event.detail.target.id);
                // and simply delete it
                api.blocks.delete(idx);
                // maybe inform user why the block wasn't added
                // alert("You cannot have 2 hero images on the same page.");
            }
        }
    }

This will remove the block however it will also throw an undefinded exception. So a code change in the Editor core is needed. The Editor's code will to check for new block... but the block doesn't exist as we've removed it.
We just changed:

if (newBlock.inputs.length === 0) {

to:

if (newBlock && newBlock.inputs && newBlock.inputs.length === 0) {

I wish the Editor's public API would be more powerful and flexible and the above action could be done in cleaner way.