Create node to handle title and body editable (multiple holes)

1

Hi, I was searching and searching but I couldn’t find how to do this case. Maybe you can help me to find a solution.

Peek 17-03-2020 18-03

Process:

  1. Select node from toolbar and add the node to the editor
  2. Focus on title (h3)
  3. When press enter, focus in paragraph
  4. If press 2 times enter, then show again the placeholder to enter a title for a new section
  5. If press enter without writing anything in the title, just hide and show body

I was reasearching multiple holes in the schema but I couldn make it work.

Can you provide me with some advise or solution to acomplish this goal?

Thanks!!

2

If you want a schema with multiple holes to handle things like having a title and a body, make a container node that can hold multiple blocks, e.g.

  get schema() {
    return {
      content: "title block+",
    };
  }

// title
  get schema() {
    return {
      content: "inline*",
      parseDOM: [{tag: "h1"}],
      toDOM: node => ["h1", {class: "title"}, 0],
    };
  }
1 Like
3

Hi, I’m trying to make this example work but having worked with prosemirror for only a week, I can’t see where I’m making a mistake, could somebody please point me in the right direction?

I’m trying to build on this example while looking at prosemirror examples on how to extend document schema (like Dinos), but the following code doesn’t work (I’m extending prosemirror-markdown schema if it matters), the error I keep getting in the console is Uncaught (in promise) RangeError: Invalid content for node doc

const titledDoc = {
    content: "title block+"
  }

  const titleNodeSpec = {
    content: "inline*",
    toDOM: () => {["h1", 0]},
    parseDOM: [{tag: "h1"}]
  }

  let mySchema = new Schema({
    nodes: schema.spec.nodes.update("doc", titledDoc).addBefore("paragraph", "title", titleNodeSpec),
    marks: schema.spec.marks
  })

Am I on the right path here?

4

If the titledDoc is not the topNode, then I believe you will have to define a toDom and parseDOM method. If you are using it as a topNode, then it should be fine.

1 Like