Looking at the Gutenberg code in the GitHub repo, we can look at how the inline image format is implemented:
export const image = {
name,
title: __( 'Image' ),
keywords: [ __( 'photo' ), __( 'media' ) ],
object: true,
tagName: 'img',
className: null,
attributes: {
className: 'class',
style: 'style',
url: 'src',
alt: 'alt',
},
Note the attributes list, the edit component makes the necessary ammendments. When your code handles a change, you can make the update by applying the format again, which should look something like this:
applyFormat( props.value, { type: 'core/image', attributes: { "data-name": new_value, ...etc } } )
There are other things to do, but for this problem those are the important parts
I also have some side notes
Accessibility, Disability Laws, and Click Handlers
As a sidenote, your original code only handles clicks, making it impossible to modify using the keyboard or assistive technologies. As a result your implementation could be illegal in numerous countries and states under various accessibility, disability, employment, and equal opportunity laws. There may be legal consequences
Making Sure Your data attribute doesn’t get stripped out by WP Security
I would also note, that the default WP whitelisting may strip out your data tags. This isn’t a part of Gutenberg, but PHP, specifically wp_kses_post. You will need to filter this whitelist to account for your data attributes.
HTML5 Semantic tags
Also, depending on the purpose of these data-name="..." attributes, you may be better off using a more semantic attribute from a standard spec, such as an Aria attribute, or a HTML5 tag. I can’t make any recommendations without knowing what the data attribute is for, but if you can use more semantic markup it may pay dividends in accessibility, SEO, and other unexpected areas.