Adding in a link into my custom code block in Uprfont

I am adding in some custom code into the store front of my site that uses the Upfront Issue theme.
I have dragged a code element into the page and started including my markup into the page.

Within this markup I have linked an image using the 'Link Image' option within the popup editor panel in Upfront. This works fine.

I am now attempting to wrap a link around this image to make it link off to another page, however as soon as I enter the element into the editor, the red error notification lights up, and will not go away. There is no error in the markup as I have copied i straight from another IDE.

here is a screen shot of the code:

For some reason, the editor will not accept links? Why? I would imagine this would be an important part of adding in your own custom code after all?

Before someone suggests for me to use the drag and drop <img> element within Upfront and then link it from there, please know I have tried this many times and Upfront restricts the size and placement of the image on the page. If i even pick it up to drag it ever so slightly, it will throw everything off. I cannot even resize elements to a precise pixel measurement as the editor just snaps it back to a different size after releasing. It became so frustrating I resorted to adding in my own CSS and doing it by this drag and drop seriously has some user-friendly flaws :disappointed:

So the above solution is ruled out. I am hoping someone can help me to get adding in links manually into the editor working, as this will save me from going in yet another direction for customising my site.

Thanks in advance