I have a custom node like this.
export const SimpleTableBlockContent = Node.create({
name: 'simpleTable',
group: 'block',
content: '',
code: false,
defining: false,
selectable: false,
isolating: false,
addAttributes () {
return {
configuration: {
default: superjson.stringify({
title: 'simple table',
data: { ...DefaultTableData, rows: [['']], headers: ['Col 1'] },
} as SimpleTableConfiguration)
}
}
},
parseHTML () {
return [
{
tag: 'data-simple-table'
}
]
},
renderHTML ({ HTMLAttributes }) {
return ['data-simple-table', mergeAttributes(HTMLAttributes)]
},
addNodeView () {
return ReactNodeViewRenderer(SimpleTableComponent)
}
})
And SimpleTableComponent has a blueprintjs like table. I know I should be using prosemirror and I will change that later.
Inside this component I run:
const doSmth = () => {
await updateAttributes({
configuration: superjson.stringify({
...configuration,
data: {
...configuration.data,
...newData
}
})
})
}
I expected that calling updateAttributes would refresh the component, but it does not. And yes, it's stupid to have it refreshed if I type something in there, I'm just trying to figure out the behavior of updateAttributes.
If you want to update attributes for the Tiptap node/ mark then either use the updateAttributes command or use ProseMirror transform options (setNodeMarkup for nodes and addMark for marks).
For example, if you want to update the link URL -
editor.chain().extendMarkRange("link").updateAttributes("link", { href: newLinkUrl }).run();
Check out the updateAttribute
command's code for a better idea.