DocumentChangeEvent('change:data) doesn't detect <imageInline> insert when load html from DB

[ScottPony]

Provide a description of the task

Try to log model document changes by

editor.model.document.on<DocumentChangeEvent>('change:data', () => { const changes = editor.model.document.differ.getChanges(); for (const change of changes) { console.log('model change', change); } });

When insert an inline image, it works as expected and export html to save to DB. But the confuse is when load html from DB to editor, the "imageBlock" could get the type: insert log print in console but "imageInline" does not. Have gone through the document but didn't find any information. What I want to do is get some authorization token from back-end server when the "imageBlock/Inline" has been loaded then I can use the response info to change the image source attribute (src) then after that the image would show in editor.

What steps should be taken to fulfill the task? What to know how to detect "imageInline" has been loaded from html or the best practice of my scenario.

📃 Other details

I know there has "ImageLoadedEvent" but in my scenario, the image has to add auth token so that it can be loaded. Have try this event but the image need loaded first then the event could be trigger so I think this event not suitable in my case.

• Browser: …chrome/edge
• OS: …windows
• CKEditor version: …38.0.1 & ckeditor5-angular: 6.0.1
• Installed CKEditor plugins: …
• "@ckeditor/ckeditor5-alignment": "^38.0.1", "@ckeditor/ckeditor5-autoformat": "^38.0.1", "@ckeditor/ckeditor5-basic-styles": "^38.0.1", "@ckeditor/ckeditor5-cloud-services": "^38.0.1", "@ckeditor/ckeditor5-easy-image": "^38.0.1", "@ckeditor/ckeditor5-editor-classic": "^38.0.1", "@ckeditor/ckeditor5-essentials": "^38.0.1", "@ckeditor/ckeditor5-find-and-replace": "^38.0.1", "@ckeditor/ckeditor5-font": "^38.0.1", "@ckeditor/ckeditor5-heading": "^38.0.1", "@ckeditor/ckeditor5-image": "^38.0.1", "@ckeditor/ckeditor5-indent": "^38.0.1", "@ckeditor/ckeditor5-link": "^38.0.1", "@ckeditor/ckeditor5-list": "^38.0.1", "@ckeditor/ckeditor5-paste-from-office": "^38.0.1", "@ckeditor/ckeditor5-table": "^38.0.1", "@ckeditor/ckeditor5-typing": "^38.0.1", "@ckeditor/ckeditor5-upload": "^38.0.1", "@ckeditor/ckeditor5-word-count": "^38.0.1"

[Witoso]

This is mentioned in the API documentation of the Differ:

Note: Elements inside inserted element will not have a separate diff item, only the top most element change will be reported.

As inlineImage is an inline element it will be nested.

I'm not sure I understand 100% fully your flow but maybe it makes sense to set some attributes during the downcast from the model to view/data on some specific element. Here's an example every time a user creates a new paragraph, they want this paragraph to have a specific class or id.

editor.conversion.for( 'downcast' ).add( dispatcher => {
    dispatcher.on( 'insert:paragraph', ( evt, data, conversionApi ) => {
				
    const viewWriter = conversionApi.writer;
				
    viewWriter.setAttribute( 'key', 'value', conversionApi.mapper.toViewElement(data.item ) )
    } );
} );

Alternatively, you could just integrate through the model on every change but it may be costly.

[ScottPony]

@Witoso thanks for your reply and point out that 'Note' I was missing out. But got confused by the suggestion. Are you trying to mark the paragraph which contain imageInline? But by that downcast, all paragraph would be attached same specific class or id after downcasting, So, I don't know how to distinguish that include imageInLine one. Or could you describe more about how to integrate through the model on every change?

[Witoso]

I just sent an example that I had at hand. It needs to be changed to work with inline images. I will try to send something later but cannot promise any ETA.

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[CKEditorBot]

We've closed your issue due to inactivity. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).