Creating a margin action to add a decorator to a block in Sanity's block editor.

// BlockMarginCommentAction.js
import React from "react";
import { Button } from "@sanity/ui";
import { CommentIcon } from "../../styles/Icons";

function BlockMarginCommentAction(props) {
    const handleClick = (event) => {
        const { insert, set, block, value } = props;
        insert([
            {
                _type: "block",
                children: [
                    {
                        _type: "span",
                        text: "New text block!",
                    },
                ],
            },
        ]);
        // Instead of inserting a new block, add a decorator to the current block?
    };
    return (
        <Button
            icon={CommentIcon}
            padding={2}
            onClick={handleClick}
            title="Add a comment to this block."
            mode="bleed"
        />
    );
}

export default BlockMarginCommentAction;

import { CommentIcon } from "../../styles/Icons";

export default {
    name: "blockComment",
    title: "Comment",
    type: "object",
    icon: CommentIcon,
    options: {
        editModal: "dialog",
    },
    fields: [
        {
            name: "comment",
            title: "Comment",
            type: "text",
        },
        {
            name: "reference",
            title: "Reference to page:",
            type: "reference",
            to: [{ type: "page" }],
        },
    ],
};

const handleClick = () => {
    const id = uuid()

    set({
      ...block,
      markDefs: [
        { 
          _type: 'blockComment',  
          _key: id,
          comment:'this is a comment',
        }
      ],
      children: [
        {
          ...block.children[0],
          marks: [ id ]
        }
      ]
    })
  }