using insertContentAt, how can i pass attributes along with the content? tiptap react

Question

I intent to be able to click a button in props extension node that will insertContentAt a paragraph that passes attributes, lets say color:blue with it.

I am using tiptap react, with a custom paragraph extension where i have a button that if clicked, creates a block node paragraph below it, i want the block node to have the attribute 'color:blue'

Paragraph.Js (extension)

const Paragraph = (props) => {

useEffect(() => {
const color = props.node.attrs.color;
}, []);

    const handleAdd=()=>{
      const endPos = props.getPos() + props.node.nodeSize;
      props.editor.commands.focus('start')
      props.editor.chain().insertContentAt(endPos, {type: "paragraph"}).focus(endPos+1).run() // creates node below current node (paragraph), i want it to have attributes passed with it.
    }

return (
    <>
    <NodeViewWrapper className="paragraph" style={{padding:'5px 100px 5px 100px'}}>
        <>
        <button onClick={()=>{handleAdd()}} contentEditable={false}>ADD NODE BELOW</button>
        </>
        : null}

      <NodeViewContent className="content" />
    </NodeViewWrapper>
    </>
  );
};

Paragraph.js (Block for extension)

import { Node, mergeAttributes } from "@tiptap/core";
import { ReactNodeViewRenderer } from "@tiptap/react";
import Paragraph from "../Blocks/Paragraph";

export default Node.create({
  name: "paragraph",
  priority: 1000,
  defaultOptions: {
    HTMLAttributes: {
    }
  },
  group: "block",
  content: "inline*",

// ------------------------
/*i tested using addAttributes, as this allows the paragraph block to 
actually hold the attribute, but i want it so only when i only
 click the button to add another block it will make the attribute blue,
not green.*/

  addAttributes: ()=>{
    return {
      color: {
        default: 'green',
      },
    }
  },

// ------------------------

  parseHTML: () => {
    return [{ tag: "div" }];
  },

  renderHTML: ({ HTMLAttributes }) => {
    return ["div", mergeAttributes(HTMLAttributes, { class: "block"}), 0];
  },

  addNodeView: () => {
    return ReactNodeViewRenderer(Paragraph);
  },
});

In the first Paragraph.js (extension) i am able to retrieve the attribute using

const color = props.node.attrs.color;

therefore, able to see if the attribute is green or blue, or in other words was either added by button click, or enter on tiptap enter.

My idea of how i could do this may be by getting the recently added block after clicking button and then updating the attribute, however this is lots of lines of code and may interupt with the "OnMounted" affect when i use the

useEffect(() => {
const color = props.node.attrs.color;
}, []);

any improvements for clarification or questions is welcome, thank you :D

Answer 1

i found out how to add attrs with insertContentAt

props.editor.chain().insertContentAt(endPos, {type: "paragraph", attrs:{ color:'blue'}}).focus(endPos+1).run()

adding - attrs:{ color:'blue'}