Ckeditor5: Unable to add multiple attributes to 'img' tag.

[vaibhavbhuva]

@Reinmar @scofalik @oleq @Mgsy

📝 Provide detailed reproduction steps (if any)

I have implemented a custom math plugin and integrated it into ck5. this plugin will convert math latex to image equation and I'm able to render the converted math equation image into a ck5 editor using the below code.

```const selection = editor.model.document.selection;
editor.model.change(writer => {
const imageElement = writer.createElement('image', {
src: data.detail.imgURL
});
editor.model.insertContent(imageElement, selection);
});

Still here everything is working fine. when  i'm trying  to store original latex equation value in image tag as custom attribute (attribute name is **data-mathml** ).  It strips out custom attributes.
So I have gone through the documentation and tried but was not able to add the custom attribute.

Below is my code : 

class InsertImage extends Plugin {

init() {
    const editor = this.editor;
    const view = editor.editing.view;
    const viewDocument = view.document;

    // Somewhere in your plugin's init() callback:
    view.addObserver( ClickObserver );

    editor.ui.componentFactory.add('insertImage', locale => {
        const view = new ButtonView(locale);
        view.set({
            label: 'Add Equations',
            withText: true,
            tooltip: true
        });

        // Callback executed once the image is clicked.
        this.listenTo(view, 'execute', () => {
            openModel();
        });
        return view;
    });

    window.addEventListener('setDatatoCK', function(data){
        const selection = editor.model.document.selection;
        editor.model.change( writer => {
             const imageElement = writer.createElement( 'image', {
                src: data.detail.imgURL,
                'data-mthml': data.detail.latexFrmla,
            } );
            editor.model.insertContent( imageElement, selection );
        } );
    })

    this.listenTo( editor.editing.view.document, 'click', ( evt, data ) => {
        if ( data.domEvent.detail == 2 ) {
            editorToPopupdoubleClickHandler( data.domTarget, data.domEvent );
            evt.stop();
        }
    }, { priority: 'highest' } );


}

};
```
I want to add multiple attributes to the image tag. What should I do to add multiple attributes?

(Note: I'm able to create a new custom tag (tag named "math") with multiple attributes but not for image tag)

Please help me with this. this blocker for me.

Methods tried:
In order to achieve this, I have created one custom tag with multiple attributes and append image tags under this custom tag. It's working fine as expected but I want to add multiple attributes to image tag not with the custom tag.

✔️ Expected result

❌ Actual result

📃 Other details

• Browser: Google Chrome Version 78.0.3904.108 (Official Build) (64-bit)
• OS: macOS Mojave 10.14.6
• CKEditor version: CKEditor 5
• Installed CKEditor plugins: ckeditor5-editor-classic,ckeditor5-image,ckeditor5-essentials,ckeditor5-basic-styles,ckeditor5-core,ckeditor5-ui

cc: @cksachdev

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[Mgsy]

Hi! Your data-mathml attribute is stripped out because CKEditor 5 has a custom data model and accepts only elements/attributes which are allowed in the schema. To preserve your attribute, you should allow it on the image element and provide a proper model <--> view conversion.

The following code introduces data-mathml attribute on the image element:

import { modelToViewAttributeConverter } from '@ckeditor/ckeditor5-image/src/image/converters';

const schema = editor.model.schema;
const conversion = editor.conversion;

schema.extend( 'image', {
    allowAttributes: [ 'data-mathml' ]
} );

conversion.for( 'downcast' ).add( modelToViewAttributeConverter( 'data-mathml' ) );
conversion.for( 'upcast' ).attributeToAttribute( {
    view: {
        name: 'img',
        key: 'data-mathml'
    },
    model: 'data-mathml'
} );

editor.setData('<img src="https://ckeditor.com/assets/images/composition/ckeditor-5/multiple-purposes-0307420f72.png" data-mathml="test">' );

editor.getData();
// "<figure class="image"><img src="https://ckeditor.com/assets/images/composition/ckeditor-5/multiple-purposes-0307420f72.png" data-mathml="test"></figure>"

[vaibhavbhuva]

@Mgsy Thank you for sharing the snippet. I figured out that there was an issue with order of plugins loading.

I was getting below mentioned error :
```
app.js:128 CKEditorError: schema-cannot-extend-missing-item: Cannot extend an item which was not registered yet. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-schema-cannot-extend-missing-item
{"itemName":"image"}
at Schema.extend (webpack:///./node_modules/@ckeditor/ckeditor5-engine/src/model/schema.js?:156:10)
at InsertImage.init (webpack:///./app.js?:38:12)

```

After that, I debugged and found the issue in plugins property. Earlier the plugin loading sequence was:

plugins: [Essentials, Image,InsertImage, ImageToolbar, ImageStyle, ImageResize ],

and then I changed it to.

plugins: [Essentials, InsertImage,Image, ImageToolbar, ImageStyle, ImageResize ],

After this change, it worked as expected.

With this solution, the image tag is appending under the figure tag. I want to remove the figure tag and place the image tag without the figure tag.
Expected view:

<img src="http://localhost:3001/output/img-3456f88c735de8d3.png" data-mathml="A=\pi r^2" advanced="false">

Actual view:

<figure class="image ck-widget ck-widget_with-resizer ck-widget_selected" contenteditable="false">
<img src="http://localhost:3001/output/img-3456f88c735de8d3.png" data-mathml="A=\pi r^2" advanced="false">
</figure>

Kindly suggest how to extend and have an image tag out of figure tag.

@Reinmar @scofalik @oleq

[Mgsy]

@vaibhavbhuva, unfortunately, you can't change it easily - this is how Image plugin works and if you'd like to change the view output, you should create your own plugin for image support with proper conversion. Feel free to check how we did it in our Image plugin and implement it on your own.