Description/Definition List

1

Hello Forum,

I’m trying to integrate definition lists:

<dl>
  <dt></dt>
  <dd></dd>
  ...
</dl>

I thought of using the code for bulleted_list or ordered_list, and applying a <dt> tag for even and a <dd> tag for odd entries. This would work similar to other lists in the editor. Is this possible to achieve in the parseDom/toDom function in the schema? Has anyone done similar things?

    list_item: {
      content: "paragraph block*",
      defining: true,
      parseDOM: [{tag: "li"}],
      toDOM() { return ["li", 0] }
    },

Any help appreciated, I’m stuck a little bit…

Thanks.

2

I found this thread How to understand the parameter `typesAfter` of the method `Transform.split()`? – but an example was missing.

3

I wouldn’t recommend going that way. A new node type with actual dedicated term and description child nodes is probably going to require less hacks (and avoids the problem where, if you remove a child, all the nodes below it change meaning).

4

Thanks for your reply – I’m trying to go your proposed way.

5

So I started with the following schema:

description_list: {
  content: "(description_term description_value)+",
  defining: true,
  group: "block",
  parseDOM: [{tag: "dl"}],
  toDOM() { return ["dl", 0] }
},

description_term: {
  content: "inline*",
  defining: true,
  parseDOM: [{tag: "dt"}],
  toDOM() { return ["dt", 0] }
},

description_value: {
  content: "inline*",
  defining: true,
  parseDOM: [{tag: "dd"}],
  toDOM() {return ["dd", 0] }
}

and the following command to add a empty block:

if (type = schema.nodes.description_list) {
  let dl = type
  r.wrapDescriptionList = new MenuItem({
    title: "Add description list",
    icon: icons.desriptionList,
    enable(state) { return canInsert(state, dl) },
    run(state, dispatch) { dispatch(state.tr.replaceSelectionWith(dl.createAndFill())) }
  })
}

This renders perfectly and empty

<dl>
   <dt></dt>
   <dd></dd>
</dl>

structure.

My next big thing is now the Enter binding. Enter within <dt> should jump to <dd>, Enter within <dd> should add a new empty <dt></dt><dd></dd> structure if not empty. If empty it should leave the parent <dl> Structure and add a new node (paragraph). I’m looking into the splitListItem Function in prosemirror-schema-list, but I’m not very lucky. I would be very happy to know some ideas in which direction to search (examples? commands?). Any help very appreciated, thanks!