Updating ReactNodeViewRenderer element's attributes when the node updates

[YaoKaiLun]

Updating ReactNodeViewRenderer element's attributes when the node updates to fix #4239

Changes Overview

Supporting function type for attrs option of ReactNodeViewRendererOptions to obtain latest attributes.

Implementation Approach

  attrs?:
    | Record<string, string>
    | ((props: {
        node: ProseMirrorNode
        HTMLAttributes: Record<string, any>
      }) => Record<string, string>)

Testing Done

  addNodeView() {
    return props => {
      const attrs = ({ node, HTMLAttributes }) => {
        return HTMLAttributes
      }

      return ReactNodeViewRenderer(Component, { attrs })(props)
    }
  },

Verification Steps

"count" attribute will real time update

Checklist

• I have created a changeset for this PR if necessary.
• My changes do not break the library.
• I have added tests where applicable.
• I have followed the project guidelines.
• I have fixed any lint issues.

Related Issues

[changeset-bot]

🦋 Changeset detected

Latest commit: 3b83b28

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 54 packages

Name	Type
@tiptap/react	Patch
@tiptap/core	Patch
@tiptap/extension-blockquote	Patch
@tiptap/extension-bold	Patch
@tiptap/extension-bubble-menu	Patch
@tiptap/extension-bullet-list	Patch
@tiptap/extension-character-count	Patch
@tiptap/extension-code-block-lowlight	Patch
@tiptap/extension-code-block	Patch
@tiptap/extension-code	Patch
@tiptap/extension-collaboration-cursor	Patch
@tiptap/extension-collaboration	Patch
@tiptap/extension-color	Patch
@tiptap/extension-document	Patch
@tiptap/extension-dropcursor	Patch
@tiptap/extension-floating-menu	Patch
@tiptap/extension-focus	Patch
@tiptap/extension-font-family	Patch
@tiptap/extension-gapcursor	Patch
@tiptap/extension-hard-break	Patch
@tiptap/extension-heading	Patch
@tiptap/extension-highlight	Patch
@tiptap/extension-history	Patch
@tiptap/extension-horizontal-rule	Patch
@tiptap/extension-image	Patch
@tiptap/extension-italic	Patch
@tiptap/extension-link	Patch
@tiptap/extension-list-item	Patch
@tiptap/extension-list-keymap	Patch
@tiptap/extension-mention	Patch
@tiptap/extension-ordered-list	Patch
@tiptap/extension-paragraph	Patch
@tiptap/extension-placeholder	Patch
@tiptap/extension-strike	Patch
@tiptap/extension-subscript	Patch
@tiptap/extension-superscript	Patch
@tiptap/extension-table-cell	Patch
@tiptap/extension-table-header	Patch
@tiptap/extension-table-row	Patch
@tiptap/extension-table	Patch
@tiptap/extension-task-item	Patch
@tiptap/extension-task-list	Patch
@tiptap/extension-text-align	Patch
@tiptap/extension-text-style	Patch
@tiptap/extension-text	Patch
@tiptap/extension-typography	Patch
@tiptap/extension-underline	Patch
@tiptap/extension-youtube	Patch
@tiptap/html	Patch
@tiptap/pm	Patch
@tiptap/starter-kit	Patch
@tiptap/suggestion	Patch
@tiptap/vue-2	Patch
@tiptap/vue-3	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for tiptap-embed ready!

Name	Link
🔨 Latest commit	3b83b28
🔍 Latest deploy log	https://app.netlify.com/sites/tiptap-embed/deploys/66c1c1235d884d0008cc83c8
😎 Deploy Preview	https://deploy-preview-5494--tiptap-embed.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[nperez0111]

Hi, appreciate your contribution here. Forgive me, but I'm having a hard time understanding what this resolves. Could you maybe add an example (codesandbox or even just in the repo is fine) to help me understand what exactly this is resolving?

Sorry to make you do more work, but I have to understand it before I can merge it

[YaoKaiLun]

Hi, appreciate your contribution here. Forgive me, but I'm having a hard time understanding what this resolves. Could you maybe add an example (codesandbox or even just in the repo is fine) to help me understand what exactly this is resolving?

Sorry to make you do more work, but I have to understand it before I can merge it

@nperez0111 I want to set a data attributes in the "react-render" div element using global attributest like "data-sid", but it doesn't update when attrs.sid was updated

https://codesandbox.io/p/sandbox/cocky-jang-vdfw46

Also you can see this issue #4239, I think it will be solved by using this solution

useEffect(() => {
  updateAttributes({
    colspan: node.attrs.colspan,
    rowspan: node.attrs.rowspan,
    colwidth: node.attrs.colwidth
  });
}, [
  updateAttributes,
  node.attrs.colspan,
  node.attrs.rowspan,
  node.attrs.colwidth
]);

addNodeView() {
  return (props) =>
    ReactNodeViewRenderer(TableCellView, {
      as: "td",
      attrs: ({ node }) => node.attrs
    })(props);
}

[nperez0111]

I would prefer to keep this updating of the element within the ReactRenderer rather than have the ReactNodeViewRenderer managing it.

Could we add a method here that basically does this code here, named updateAttributes which ReactNodeViewRenderer calls when it wants to apply the changed attributes.

[YaoKaiLun]

Good advice, thank you!

[nperez0111]

Would prefer to call into the ReactRenderer here so we keep these separated

[YaoKaiLun]

Please review again~ @nperez0111

[nperez0111]

Thanks for explaining & the code sandbox. I like this, just a minor nitpick

[nperez0111]

LGTM