How to add id attribute on span tag in WP Block Editor Toolbar Button

Question

I'm creating the element for rich text toolbar button for wp blockeditor that will create an option to wrap the selected text into span tag. Now what I want is to add an ID attribute into the span tag. And inside the ID attribute the value will be random generated.

Required html output: <span id="ABC123abc">Some Text</span>

Code:

    var AddAnchorButton = function(props) {
        return wp.element.createElement(
            wp.blockEditor.RichTextToolbarButton, {
                icon: 'admin-links',
                title: 'Add Anchor',
                onClick: function() {
                    props.onChange(wp.richText.toggleFormat(
                        props.value, { type: 'anchor-format/add-anchor-button' }
                    ));
                },
                isActive: props.isActive,
            }
        );
    }


    wp.richText.registerFormatType(
        'anchor-format/add-anchor-button', {
            title: 'Add Anchor',
            tagName: 'span',
            className: null,
            edit: AddAnchorButton,
        }
    );


})(window.wp);

Answer 1

I struggled with this also, here is my Solution:

save: function (props) {    
return wp.element.createElement(
  "div",
  null,
  wp.element.createElement(
    "strong",
    null,
    "dear xy,"
  ),
  wp.element.createElement(
    "p",
    {anchor: true},
    "example text "
  ),
  wp.element.createElement(
    "span",
    null,
    "hello, : ",
    wp.element.createElement(
      "a",
      {id: "personId", rel: "noreferrer noopener", href: "https://www.google.com", target: "_blank"},
      "person xy"
    )
  )
);

}