Problem with html inserted into editor

[daniele-nocentini]

Describe the bug
If I insert some html code into the editor that contains an img tag this is modified by suneditor but does not respect the tag hierarchy for example if the image is inserted into a cell of a table.

To Reproduce
Steps to reproduce the behavior:

1. Insert into editor some html code by method insertHTML with notCleaningData property set to true
2. Look on html generate by editor and you can see that img tag now it's enclosed by a div and figure tags but he was put out of the table cell.

Expected behavior
I would expect the html provided to be untouched if the notCleaningData property it's set to true or at least that the html tag hierarchy is respected.

Html to test

John Doe

Development and Programming <span id="subDepartment" style="font-family: Arial, sans-serif; font-size:11px; font-weight: 400;"></span> <span class="companyColor" style="color: rgb(227, 82, 5);"> | </span> <span style="font-family:Arial,sans-serif;font-size:12px;font-weight:400"> <a class="companyColor" href="https://www.acmeinc.omc" id="companyUrl" style="color: rgb(227, 82, 5); text-decoration: none !important;" target="_blank"> <strong> <font color="#e35205" id="companyName">Acme Inc</font> </strong> </a> </span> </td> </tr> <tr> <td id="contact" style="font-family:Arial,sans-serif;font-size:10px;font-weight:400;"><span id="tel">Email: johndoe@acmeinc.omc</span></td> </tr> </tbody></table> <table border="0" cellpadding="0" cellspacing="0" style="width:380px;clear:both"> <tbody><tr><td style="height:4px;border-bottom:1px solid #cccccc;line-height:4px"></td></tr> <tr><td style="height:5px;line-height:5px"></td></tr> </tbody></table> <table border="0" cellpadding="0" cellspacing="0" style="width:380px;clear:both"> <tbody><tr> <td style="width:120px"> <a href="https://www.acmeinc.omc" id="companyUrlLogo" style="text-decoration:none!important" target="_blank"><img alt="" id="companyLogo" width="120px" src="https://storage.googleapis.com/gweb-uniblog-publish-prod/images/logo_Google_FullColor_3x_830x27.max-600x600.format-webp.webp" /></a> </td> <td> <table border="0" cellpadding="0" cellspacing="0"> <tbody><tr> <td style="font-family:Arial,sans-serif;font-size:10px;font-weight:400"> <a href="https://www.acmeinc.omc" id="companyUrlRight" style="color:#666;text-decoration:none!important" target="_blank"> <font color="#666"><strong id="companyUrlShortenedRight">www.acmeinc.omc</strong></font> </a> </td> </tr> <tr> <td style="height:1px;line-height:1px"></td> </tr> <tr> <td id="dataCenterRacing" style="font-family:Arial,sans-serif;font-size:10px;font-weight:400"><a href="https://www.datacenter.omc" style="color:#666;text-decoration:none!important" target="_blank"><font color="#666"><strong>datacenter.omc</strong></font></a><span class="companyColor" style="color:#e35205"> | </span><a href="https://www.acmeinc.omc" style="color:#666;text-decoration:none!important" target="_blank"><font color="#666"><strong>acmeinc.omc</strong></font></a></td> </tr> <tr> <td style="height:1px;line-height:5px"></td> </tr> <tr> <td id="social-box" style="font-family:Arial,sans-serif;font-size:10px;font-weight:400;"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <table border="0" cellpadding="0" cellspacing="0" style="width:380px;clear:both"> <tbody><tr><td style="height:5px;line-height:5px"></td></tr> <tr> <td> <p id="disclaimer" style="font-family:Arial,sans-serif;font-size:8px;color:#999;padding:0px;margin:0px;margin-auto:0px;mso-line-height-rule: exactly;line-height:125%;">This message and its attachments are intended exclusively for the recipients. Any unauthorized use, communication or disclosure is strictly prohibited. If you have received this message in error, please delete it immediately and notify the sender.</p> </td> </tr> </tbody></table> </div> <br /><br /> </span> <br /> </span> Screenshots If applicable, add screenshots to help explain your problem. **Desktop OS: Windows 11 Browser: Google Chrome Version: 128.0.6613.115

[JiHong88]

Can you give me the problematic html source?

[daniele-nocentini]

signature.zip

[masechkacat]

@JiHong88 Is this issue solvable within SunEditor, or is it a library problem? We’re encountering the same issue with email signatures and are exploring solutions, but haven’t found any. Since SunEditor is widely used across our project, we’d prefer not to stop using it...

[johnnybaida]

@JiHong88 I am also experiencing this anomaly. Thank you

[johnnybaida]

Hi @JiHong88 , I noticed that the problem occurs with strictMode to false.

I hope it can be helpful to you.
Thanks for the support.

[CorinnaZer]

@JiHong88 please fix this, it's very visible and I can't find any other way to workaround it!! I can't set strictMode to true!

[CorinnaZer]

@JiHong88 the problem is located in image.js plugin, in update_image at this line:

if (this.util.isFormatElement(existElement.parentNode) && this.options.strictMode) {
                   const formats = existElement.parentNode;
                   formats.parentNode.insertBefore(container, existElement.previousSibling ? formats.nextElementSibling : formats);
                   if (contextImage.__updateTags.map(function (current) { return existElement.contains(current); }).length === 0) this.util.removeItem(existElement);
               } else {
                   existElement = this.util.isFigures(existElement.parentNode) ? existElement.parentNode : existElement;
                   existElement.parentNode.replaceChild(container, existElement);
               }

if you add && this.options.strictMode to that if statement, the problem is solved, otherwise please tell me a way to make it work