In this post, attempting to insert an image with the editor does nothing. When I click the image button, enter a link, and proceed, nothing happens. After this (not shown in GIF below), the live preview stops working entirely.
This seems to have something to do with the presence of Cypriot syllabary block characters in the post, following an image link and when they are contained in parentheses (see bottom of this report). I have reproduced it in this answer as well, and an even simpler test case (presumably the same issue, see below) is here.
- Animated GIF of this happening -- which I'm linking to now because looking at it was starting to annoy me.
A few notes:
- It has nothing to do with the image link itself. Even though I reused one from the post in the above example, all other attempts also failed on this post.
- Inserting images works fine on all the other posts I tried on that site.
- I did do a full page reload and try again (in case something got weird) to no effect.
- Once I attempt to insert an image, the live preview just gets stuck in whatever state its in, and no longer updates to reflect changes to the post until the page is refreshed.
- In fact you can break the editor right away without involving images if you put these characters in the URL portion of a
[text](url)pattern (see below).
The original author of that post confirmed the issue as well:
@JasonC: Yes, I've noticed the same thing. The first image was fine, but for the second one I had to write the code by hand.
The following two errors appear in the console (Chrome) when an image insert is attempted in the above linked post:
wmd.en.js?v=22ea6436650f:2 Uncaught URIError: URI malformed at encodeURIComponent (<anonymous>) at https://cdn.sstatic.net/Js/wmd.en.js?v=22ea6436650f:2:10304 at RegExp.[Symbol.replace] (<anonymous>) at String.replace (native) at https://cdn.sstatic.net/Js/wmd.en.js?v=22ea6436650f:2:10216 at RegExp.[Symbol.replace] (<anonymous>) at String.replace (native) at l (https://cdn.sstatic.net/Js/wmd.en.js?v=22ea6436650f:2:10147) at RegExp.[Symbol.replace] (<anonymous>) at String.replace (native) (anonymous) @ wmd.en.js?v=22ea6436650f:2 (anonymous) @ wmd.en.js?v=22ea6436650f:2 l @ wmd.en.js?v=22ea6436650f:2 s @ wmd.en.js?v=22ea6436650f:2 o @ wmd.en.js?v=22ea6436650f:2 (anonymous function) @ wmd.en.js?v=22ea6436650f:1 (anonymous function) @ wmd.en.js?v=22ea6436650f:1 (anonymous function) @ wmd.en.js?v=22ea6436650f:1 (anonymous function) @ wmd.en.js?v=22ea6436650f:1 (anonymous function) @ wmd.en.js?v=22ea6436650f:1 (anonymous function) @ wmd.en.js?v=22ea6436650f:1 makeHtml @ wmd.en.js?v=22ea6436650f:1 y.addLinkDef @ wmd.en.js?v=22ea6436650f:2 l @ wmd.en.js?v=22ea6436650f:2 f @ wmd.en.js?v=22ea6436650f:3 (anonymous) @ image?https=true:5 VM1763:399 Uncaught ReferenceError: jQuery is not defined at <anonymous>:399:6 at HTMLScriptElement.sourceEl.onload (eval at <anonymous> (:2:297), <anonymous>:449:19) (anonymous) @ VM1763:399 sourceEl.onload @ VM1761:449
After that, every key press in the editor yields the following error:
wmd.en.js?v=22ea6436650f:1 Uncaught Error: Recursive call to converter.makeHtml at Markdown.Converter.makeHtml (wmd.en.js?v=22ea6436650f:1) at p (wmd.en.js?v=22ea6436650f:1) makeHtml @ wmd.en.js?v=22ea6436650f:1 p @ wmd.en.js?v=22ea6436650f:1
In this particular post, I've confirmed it seems to be related to the strings of Cypriot syllabary symbols in that post (in the quote) combined with the image link before them and the parentheses around them, which I will not copy+paste here so as not to break this post, but their UTF-8 encodings are:
F090A080 F090A0B0 F090A0A6 F090A0A1 F090A0A9
It's the following specific pattern that causes a problem, which represents the typical
[text](url) link pattern (probably not a coincidence):
[![enter image description here]] (<those characters>)
Before attempting any edits, if I do any one of:
- Remove these characters, or
- Remove the embedded images preceding these characters, or
- Remove the parentheses surrounding those characters
... then image insertions work fine and the editor does not break. I have not attempted to narrow it down to a specific character.
Indeed it is actually a bit simpler to reproduce. If a post contains the following text (putting it in a code block seems to protect the editor):
It immediately breaks the editor. You can copy and paste the string above into a new post and watch it happen.
This is a little different from the case in the post, though. This does not break the editor (note the space):
Although this does:
[![enter image description here]] (𐀀𐀵𐀫𐀦)
So I'm not actually entirely sure if they are the same thing or separate issues, but they certainly appear related.