Prevent text in ProseMirror-Document from automatically moving up when previous node is emptied

Question

I have the following custom schema (shortened to only relevant parts):

const schema = new Schema({
  nodes: {
    doc: {content: 'title section+'},
    title: {
      content: 'text*',
      marks: "",
      isolating: true,
      toDOM() { return ["span", {class: "document-title"}, 0] },
      parseDOM: [{tag: "span.document-title"}]
    },
    section: {
      group: 'section',
      content: 'block+',
      toDOM() {return ['section', 0]}
    },
    paragraph: {
      content: "inline*",
      group: "block",
      parseDOM: [{ tag: "p" }],
      toDOM() { return ['p', 0]; }
    },
    text: {
      group: 'inline',
      inline: true
    }
  }
})

My Document looks something like this:

My document title <-- withing span.document-title
My document body <-- within section

in HTML it would - according to my schema - look like this:

<span class="document-title">My document title</span>
<section>My document body</section>

Here's my problem:
When I delete everything in the title, the content of the <section> moves up, so now my title would be "My document body".
This is not what I want to happen.
I want the document body (everything within the <section>) to stay where it is and the title should be treated sort of like another editor, so nothing I do inside the title affects the body.

I thought setting "isolating: true" on the title would achieve exactly this behavior since the official documentation states:

When enabled, the sides of nodes of this type count as boundaries that regular editing operations, like backspacing or lifting, won't cross.

However, it does not seem to do anything.

Answer 1

I would separate the node type for the title that way you keep it outside of the main document structure like this:

nodes: {
    doc: { content: "section+" },
    title: {
      content: "text*",
      group: "title",
      toDOM() {
        return ["h1", { class: "document-title" }, 0];
      },
      parseDOM: [{ tag: "h1.document-title" }],
    },
    section: {
      content: "block+",
      toDOM() {
        return ["section", 0];
      },
    },

That should prevent unwanted movement because it would now be part of a separate node.