tiptapprose-mirror

tiptap2 updateAttributes won't re-render the component


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.


Solution

  • 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.