When editing an existing content panel in the backoffice, the following unexpected behaviour occurs:

1. Go to a page with an existing Content Panel with content in it.
2. Edit the Content Panel.
3. Click the Image Picker icon, and select an image.
4. Confirm the selection (which closes the Panel editor).
5. The image is not shown in the page editor.
6. The image is not saved in the content when Publish and Save is clicked.

However, if before clicking Save and Publish, the user clicks on the RTE icon to show the markup, the tag is there and it is also saved correctly if you click Save and Publish at this point.

Could this a known issue, or could it be related to our TinyMCE configuration?

Our RichTextEditor configuration in appsettings.json has the following configuration for the Valid and Invalid elements:

"InvalidElements": "font,b,i,strike,u,div,span,pre,h1,object,param,map,area,bdo,button",

"ValidElements": "+a[href|id|target|title|class],-strong,-em,#p[id],-ol[type],-ul,-li,br,img[src|alt=|width|height],-sub,-sup,-blockquote,-table[summary],-tr[rowspan],tbody,thead,tfoot,#td[colspan|rowspan|scope],-th[colspan|rowspan|scope],caption,address,-h2[id],-h3[id],-h4[id],-h5[id],-h6[id],hr,small,dd,dl,dt,iframe[*],figure,figcaption"

When the issue occurs, there is a JS console error:

TypeError: Cannot read properties of null (reading 'complete') at umbraco.services.min.js?d=638645093150000000:1:97285 at angular.js:21765:28 at Yg.completeTask (angular.js:21403:7) at angular.js:6879:7