Ruby text mark parse rule

1

I’m building a ruby text mark that has the following renderHTML method:

renderHTML({ mark, HTMLAttributes }) {
    return [
        'ruby',
        HTMLAttributes,
        ['span', {}, 0],
        ['rt', { contenteditable: false }, mark.attrs.text],
    ];
},

This was based on this answer and it works great. The mark just has a single text attribute. There’s a separate UI for editing the ruby text, which is why that’s not editable.

The issue I’m having is coming up with a paste rule that also works. I have this so far:

parseHTML() {
    return [
        {
            tag: 'ruby',
            contentElement: 'span',
            getAttrs: element => ({
                text: element.querySelector('rt').textContent,
            }),
        },
    ]
},

Which does seem to produce content that looks right, however it throws the following error which is then breaking the editor:

Screenshot 2024-06-26 at 09.43.14

Any ideas?

2

I don’t think that is coming from this parse rule. You’d get that error if a toDOM (renderHTML in TipTap) returns an array with undefined as first element (or, more likely, no elements).

3

Ah OK. It doesn’t happen if I remove parseHTML, but maybe it’s parsing correctly and then failing to render? I will check. Thanks.

4

The issue is the HTMLAttributes item in renderHTML. I’m not sure why, since if I log that value it’s always an object with the attribute, never an empty/undefined array, but removing that and just passing an empty object fixes it:

renderHTML({ mark }) {
    return [
        'ruby',
        {},
        ['span', {}, 0],
        ['rt', { contenteditable: false }, mark.attrs.text],
    ];
},

We don’t need it for now so that’s fine as a workaround.