Link on image is lost after loading the content with GHS enabled

[Schwammerl11]

EDITED:

📝 Provide detailed reproduction steps (if any)

1. Load an image into an editor (in which GHS is enabled + allow all)
2. Add a link to the image via the LinkImage plugin
3. Save the editor's data by running editor.setData( editor.getData() ) in the browser's console
4. Retrieve the data via editor.getData()
5. Observe that the <a> tag is stripped in the data retrieved

📃 Other details

Disabling GHS makes this works as expected i.e. the link is retained. Tested this using our linkimage manual test with the GeneralHtmlSupport plugin enabled.

This doesn't seem to be a regression (at least not a recent one) since it exists as far back as v30.0.0 of the editor.

ORIGINAL POST:

📝 Provide detailed reproduction steps (if any)

1. Load image in editor (base64)
2. Add link to image
3. Save and close editor
4. Link tag is correctly generated as HTML and URL can be opened
5. Reopen editor
6. Link is not shown in editor
7. When content is saved again, the link is lost

✔️ Expected result

Link should show up in editor and be editable

❌ Actual result

Link does not show up in editor and is therefore lost when content is saved again

📃 Other details

HTML Code on which editor is initialized upon, link tag included

Editor source code, link tag omitted

Example code, use toggle button to show/hide editor
https://codepen.io/schwammerl11/pen/mdKWaoV

• Browser: Google Chrome v107.0.5304.89
• OS: Windows 11 v21H2 (22000. 1098)
• First affected CKEditor version: 35.1.0
• Installed CKEditor plugins: [
  "Alignment",
  "Autoformat",
  "AutoImage",
  "AutoLink",
  "Autosave",
  "Base64UploadAdapter",
  "BlockQuote",
  "Bold",
  "CloudServices",
  "Code",
  "CodeBlock",
  "DataFilter",
  "DataSchema",
  "Essentials",
  "FindAndReplace",
  "FontBackgroundColor",
  "FontColor",
  "FontFamily",
  "FontSize",
  "GeneralHtmlSupport",
  "Heading",
  "Highlight",
  "HorizontalLine",
  "HtmlComment",
  "HtmlEmbed",
  "Image",
  "ImageCaption",
  "ImageInsert",
  "ImageResize",
  "ImageStyle",
  "ImageToolbar",
  "ImageUpload",
  "Indent",
  "IndentBlock",
  "Italic",
  "Link",
  "LinkImage",
  "List",
  "ListProperties",
  "MediaEmbed",
  "MediaEmbedToolbar",
  "Mention",
  "PageBreak",
  "Paragraph",
  "PasteFromOffice",
  "RemoveFormat",
  "SourceEditing",
  "SpecialCharacters",
  "SpecialCharactersArrows",
  "SpecialCharactersCurrency",
  "SpecialCharactersLatin",
  "SpecialCharactersMathematical",
  "SpecialCharactersText",
  "StandardEditingMode",
  "Strikethrough",
  "Style",
  "Subscript",
  "Superscript",
  "Table",
  "TableCaption",
  "TableCellProperties",
  "TableColumnResize",
  "TableProperties",
  "TableToolbar",
  "TextPartLanguage",
  "TextTransformation",
  "Title",
  "TodoList",
  "Underline",
  "WordCount"
  ]

---

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

[Schwammerl11]

Temporary fix:

Somehow the editor does not break the link when it's not contained within FIGURE but is the parent of FIGURE instead.
The following code does just that and firstly moves every child node of A to FIGURE, then inserts A to where FIGURE was before appending FIGURE to A.
Add this before initializing your editor.

richtext.querySelectorAll('figure > a').forEach(a => {
  let f = a.parentNode;
  Array.from(a.children).forEach(c => f.appendChild(c));
  f.parentNode.insertBefore(a, f);
  a.appendChild(f);
});
        
ClassicEditor.create( richtext, ...

[mabryl]

Hi @Schwammerl11,

Thanks for reaching out and for bringing this issue to our attention. We can confirm that it does indeed occur and seems to be related to the GeneralHtmlSupport plugin.

I took the liberty of changing your post's title and adding my troubleshooting steps to the top of it to make it a little bit easier for our devs to tackle this issue. Hope you don't mind.

Feel free to continue participating in this thread if you have anything else to share.

Once again, thank you for using our editor and helping us make it better 🙂

[Witoso]

Refinement: to check the order of upcast conversion when GHS and LinkImageis enabled.