Hi, I am trying to create a new node that works as a parent for a custom node called ‘media’.
The purpose is to apply link marks to the custom media node within this parent node, which I’ve named mediaBlock .
// here is new parent node
export const ParentMediaBlock = Node.create({
name: 'mediaBlock',
group: 'block',
content: 'media*',
marks: 'link',
renderHTML({ node }) {
return ['div', { class: 'media-block' }, 0];
},
});
// here is my custom node for rendering images using NodeView.
export const Media = Node.create<MediaOptions>({
name: 'media',
inline: false,
group: 'mediaBlock',
draggable: true,
selectable: true,
...
})
When I insert an image file, it gets inserted successfully as follows in the HTML:
<div class="tiptap ProseMirror ProseMirror-hideselection" contenteditable="true" tabindex="-1" translate="no">
<div class="media-block">
<div class="react-renderer node-media" contenteditable="false" draggable="true"></div>
</div>
<!-- ... (other content) -->
</div>
My expectation was that applying the ‘link’ mark to the media node would work because its parent node, mediaBlock, has the attribute marks: 'link'.
However, this doesn’t seem to be the case. What should I do to make it work?