$el.empty() causing component:remove trigger

[confettidc]

HI all,

I'm writing an advanced image component which can read different images in desktop and mobile views as below:

export default GrapesJS.plugins.add('image', (editor, options) => {
	const funnel_page_type = options.funnel_page_type;
	const funnel_page_id = options.funnel_page_id;
	const edit_lang = options.edit_lang;
	const csrf_token = options.csrf_token;
	//console.log("global csrf_token: " + csrf_token);

	const default_img = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImZpbGw6IHJnYmEoMCwwLDAsMC4xNSk7IHRyYW5zZm9ybTogc2NhbGUoMC43NSkiPgogICAgICAgIDxwYXRoIGQ9Ik04LjUgMTMuNWwyLjUgMyAzLjUtNC41IDQuNSA2SDVtMTYgMVY1YTIgMiAwIDAgMC0yLTJINWMtMS4xIDAtMiAuOS0yIDJ2MTRjMCAxLjEuOSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMnoiPjwvcGF0aD4KICAgICAgPC9zdmc+";

	editor.DomComponents.addType('responsive-image', {
		//isComponent: el => el.tagName === 'IMAGE',
		model: {
			defaults: {
				tagName: 'picture',
				name: 'Image',
				draggable: '.container, .container *, .container-fluid, .container-fluid *',	
				attributes: {
					class: 'img-fluid'
				},
				funnel_page_type: null,
				funnel_page_id: null,
				edit_lang: 'tc',
				alt: '',
				components: `
					<!-- show this up to sm -->
				    <source srcset="${default_img}" type="image/jpeg" media="(max-width: 596px)" />
				    <!-- else show this -->
				    <img class="img-fluid" alt="" data-gjs-highlight="false" src="${default_img}" />
				`,
				toolbar: [
					{
                        attributes: {class: 'fa fa-arrow-up'},
                        command: 'select-parent'
                    },
                    {
                    	attributes: {class: 'icon-pencil'},
                    	command: (editor, sender, {
                    		funnel_page_type: funnel_page_type,
                    		funnel_page_id: funnel_page_id
                    	}) => {
					    	//console.log("in command");
					    	//console.log(options);

					    	const selectedComponent = editor.getSelected();
					    	console.log(selectedComponent.ccid);

							$.fancybox.open({
								type: 'iframe',
								src: '/admin/gjs-images/index/' + options.funnel_page_type + '/' + options.funnel_page_id + '/' + selectedComponent.ccid + '/' + options.edit_lang,
								iframe: {
									preload: false	
								},
								afterClose: () => {
									//console.log("fancybox closed");

									try {
										// reload content with replace component with same type
										selectedComponent.replaceWith(`
											<picture data-gjs-type="responsive-image" id="${selectedComponent.ccid}"
												data-gjs-funnel_page_type="${options.funnel_page_type}"
												data-gjs-funnel_page_id="${options.funnel_page_id}"
												data-gjs-edit_lang="${options.edit_lang}">
											</picture>`);
									} catch (e) {
										editor.Modal.open({
											title: 'Notice',
											content: `
												<p class="text-center mb-5">Click 'Refresh' to view update content</p>
												<p class="text-center"><a href="javascript:location.reload()" class="btn btn-dark">Refresh Page</p>
												`
										});
									}
								}
							});
						}
                    },
                    {
                        attributes: {class: 'fa fa-arrows'},
                        command: 'tlb-move'
                    },
                    {
                        attributes: {class: 'fa fa-trash'},
                        command: 'tlb-delete'
                    },
                ],
                traits: [
                	{
                		type: 'text',
                		name: 'alt',
                		label: 'Alt',
                		changeProp: 1
                	}
                ]
			},
			init() {
				this.on("change:alt", this.handleAltChange);
				//this.on('component:remove', this.handleRemove);
			},
			handleAltChange() {
				const component = editor.getSelected();

				const $lastChild = component.getLastChild();

				// console.log(component.getLastChild());
				// console.log(component.getTrait('alt').props().value);

				$lastChild.setAttributes({
					alt: component.getTrait('alt').props().value
				});

				//console.log($lastChild.getAttibutes());
			},
			removed() {
			 	console.log("handleRemove triggered");

			 	const img_id = this.ccid;
			 	console.log("img_id: " + img_id);
			 	//console.log("csrf_token: " + csrf_token);

			 	// remove image record from db
			 	$.post('/admin/gjs-images/ajaxDeleteComponent/' + funnel_page_id + '/' + img_id + '/' + edit_lang, {
			 		_csrfToken: csrf_token
			 	}, function(data) {
					
			 	}, 'json');
			}
		},
		view: {
			onRender({ el }) {
				const { $el, model } = this;

				// console.log($el);
				// console.log(model.get('alt'));

				const funnel_page_id = model.get('funnel_page_id');
				const img_id = $el.attr('id');
				const alt = model.get('alt');
				//console.log(alt);

				$.ajax({
					url: '/admin/gjs-images/ajax-get/' + funnel_page_id + '/' + img_id + '/' + edit_lang,
					dataType: 'json',
					beforeSend: () => {
						$el.empty();
					},
					success: (data) => {
						const desktop_img = typeof data.desktop != 'undefined' ? data.desktop.url : default_img;
						const mobile_img = typeof data.mobile != 'undefined' ? data.mobile.url : desktop_img;

						model.updateTrait('alt', {
							value: alt
						});

						$el.append(`
							<!-- show this up to sm -->
						    <source srcset="${mobile_img}" type="image/jpeg" media="(max-width: 596px)" />
						    <!-- else show this -->
						    <img class="img-fluid" data-gjs-highlight="false" src="${desktop_img}" alt="${alt}" />
						`)
					}
				});
			}
		}
	});

	

	editor.BlockManager.add('image', {
		id: 'image',
		label: 'Image',
		category: 'Component',
		media: `<img src="https://ecrm-funnel.oss-cn-hongkong.aliyuncs.com/customer-files/dev/5ea7847c17d7815a6c03daee/files/20211109182938-618a4d92c66eb.jpg" width="73" height="56" />`,
		content: {
			type: 'responsive-image',
			funnel_page_type: funnel_page_type,
	  		funnel_page_id: funnel_page_id,
	  		edit_lang: edit_lang
		}
	});
});

I found that model's removed() function was triggered when called $el.empty() before ajax in view, which is auto-delete db record after add.

Any hints to replace component content without emptying previous data?

Thanks.