Ghost: Not possible to edit some (random) gallery captions

[oskarkrawczyk]

Issue Summary

Once a gallery with a long caption is inserted, it's only randomly possible to edit caption on one of the few galleries available in the editor.

(note that I'm actually clicking and trying to put a cursor in the caption of the second gallery)

I'm pretty sure this is going to be tricky to replicate, since I've tried to put together reproduction steps but the problem just appears at random.

To Reproduce

1. Insert a few galleries with long captions
2. Save, refresh, try to edit all captions

Technical details:

• Ghost Version: ~3.1.0~ 3.16
• Node Version: 10.x
• Browser/OS: Safari, macOS / Chrome, macOS
• Database: sqlite

[naz]

@oskarkrawczyk did you see any errors in the console when these captions became uneditable? Any additional clues would help

[oskarkrawczyk]

@gargol While I saw no JS errors in the console, I was able to reproduce the problem by importing a production data export into a development env with the latest Ghost installed.

I'm attaching an export with the post that causes issues - for security reasons I've deleted all other JSON keys from the data key. Hope this is enough to repro the issue on your end.

data.json.zip

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[oskarkrawczyk]

Hey folks, listen, I know this issue has been marked as stale and I understand why (I also have an app (@jsfiddle) with many issues that will most likely be forgotten because I have no capacity to fix them).

I was kind of hoping some update will eventually fix the problem, but it hasn't so I did further digging.

While I still can't figure out why the issue occurs on some captions, there is a really weird way to temporarily fix it. All comes down to changing contents of the paragraph in the figcaption, either via devtools or even with a:

document.querySelectorAll("figcaption p").forEach(function(p){
  p.innerHTML = p.innerHTML
})

Either way, it's going to make the caption editable again.

@naz Long shot, but is there any chance a specific part of the code dealing with the clickthrough and some string comparison on captions comes to mind? If someone could point me in the right direction, I might have a deeper look into the codebase.

[naz]

I think @kevinansfield would be the best person to advice on particular part of codebase to dig for this issue. Also, from a very quick glance this might be related - https://github.com/TryGhost/Ghost/issues/11779.