Inline Node with simple content?

1

I’m working on implementing a WYSIWYM editor with ProseMirror for DokuWiki. In DokuWiki links to other pages can be quite complex, so I would like to implement them as inline nodes instead of marks. However, while these links are allowed to be formatted as a whole (say, made bold), they are not allowed to contain any formatting within themselves.

My naive approach is to create an inline node with only a single text node, so that I have no marks on only a part of the displayed text:

nodes = nodes.addToEnd('internallink', {
    content: 'text|image',
    marks: '_',
    group: 'inline',
    inline: true,
    attrs: {
        class: {},
        href: {},
        'data-id': {},
        'data-query': { default: null },
        'data-hash': { default: null },
        title: { default: null },
    },
    toDOM(node) {
        return ['a', node.attrs, 0];
    },
});

However, that fails when I try to actually edit the node, because typing inside of it splits it up and inserts the typed characters between the two parts as plain text, instead of replacing the textnode with a new one with the altered content.

If I change the spec to

content: 'text+|image',

then I can adjust the text of the link exactly as I would expect, however now can apply marks to parts of the the link as well, which is not ideal either.

Now I could set

marks: '',

However, now I lost all ability to apply marks to that node, not just to parts of it.

Is there some way for me to implement the desired behavior without creating a fully fledged NodeView as described in the footnote example? I really only want an inline node with marks that only allows to contain pure text without any marks.

I would appreciate any help or being pointed into the right direction. :slightly_smiling_face:

PS: I wasn’t sure whether to ask here or on stackoverflow. This seems like the more established place, but SO might be more suitable for narrowly-scoped FAQ-ish questions?

2

You probably want something like "text*|image" for the content expression, but inline nodes with contents aren’t something that tends to work out of the box, since browsers aren’t very coherent about the way they handle cursor motion around inline node edges.

You could create a node view for the node with a custom editor for the link text, but that does mean that you have to manually wire up cursor motion to properly go into and out of it.

No, you’ve disabled marks on the content of the node, not on the node itself. The link can still be bold or emphasized, but the mark lives on the link node, not on the text in the link. This is probably good.

1 Like
3

Thank you for your advice. This is now implemented as node view and does indeed work well that way. :+1: