Text inside DOMOutputSpec

1

I’ve attempted the below as a straw man to see if I can get some from of metadata into a ProseMirror doc in as simple a way as possible. To do that each node would need a title in the UI, and rather than mapping decorations forever I thought I’d just add text to the DOMOutputSpec. It’s pretty trivial to do and yet doesn’t work in either Firefox or Chrome (cursoring backwards from the content of, say, the imageAlt node puts the cursor into the h2 tag). I just wondered whether this was supposed to be supported?

const image = schema =>
  schema.spec.nodes.append({
    image: {
      group: 'block',
      content: 'imageCaption imageAlt',
      attrs: {
        src: {}
      },
      parseDOM: [
        {
          tag: 'div.image-embed',
          attrs: dom => ({
            src: dom.querySelector('[data-image]').src
          })
        }
      ],
      toDOM: node => [
        'div',
        { class: 'image-embed' },
        ['img', { src: node.attrs.src, 'data-image': true }],
        ['div', 0]
      ],
      defining: true,
      isolating: true
    },
    imageCaption: {
      toDOM: () => ['div', ['h2', 'Caption'], ['div', 0]],
      content: 'inline*',
      defining: true,
      isolating: true
    },
    imageAlt: {
      toDOM: () => ['div', ['h2', 'Alt'], ['div', 0]],
      content: 'inline*',
      defining: true,
      isolating: true
    }
  });
2

Could you be a bit more clear about what you are trying to accomplish?

3

Apologies yes, I can basically thin my question down to the following:

    imageAlt: {
      toDOM: () => ['div', ['h2', 'Alt'], ['div', 0]],
      content: 'inline*',
      defining: true,
      isolating: true
    }

This doesn’t work when my content is inline* but after some playing it works with block+ as content.

What I mean by “it doesn’t work” is that when I’m at the first position of the content hole for this node, if I cursor backwards I end up with my cursor inside “Alt” (the text that has been added by toDOM) rather than the previous node. If I cursor backwards again, the cursor moves forward into the content hole etc. etc. I just wondered if this setup was supported but it does seem to work fine with block+ so I’m assuming it’s just a bug.

4

Does adding contenteditable: false to the h2 tag help?

5

That did help when I looked at it over the weekend (although I seem to remember a couple of little bugs) but I’m actually happier using block+ in this case thanks!