Issue with Editor

[ddm231]

Issue Summary

Hello everyone,

I’m encountering an issue with my Ghost installation where the editor fails to load for certain pages or posts. Instead of displaying the editor, I just see a blank screen. Strangely, this problem doesn’t occur for all pages or posts—some work perfectly fine while others don’t.

The error seems to indicate a JSON parsing issue.

Steps to Reproduce

1. Login to Ghost admin panel
2. Open “Pages” or “Posts”
3. Click on “Edit page/edit post”

---

Setup information

Ghost Version
Version: 5.110.2
Environment: production

Node.js Version
v18.18.0

How did you install Ghost?
Self hosting

Provide details of your host & operating system
OS: Ubuntu 22.04.2 LTS
Hosting: netcup / KVM Server
Specs: 4 Core “QEMU Virtual CPU version 2.5+”, 4.1 GB RAM & 4.1 GB Swap

Database type
MySQL 8

Browser & OS version
Same problem on Windows, Linux, macOS (and in all other browser)

Relevant log / error output
Uncaught (in promise) SyntaxError: Expected ',' or '}' after property value in JSON at position 123 (line 1 column 124)

[Cathy_Sarisky]

Is this a fresh install, or has it been recently upgraded? Were posts created on this install, or imported from elsewhere?

Anything to go along with the browser error in the ghost logs?

[ddm231]

The Ghost instance was installed in August 2023 and is configured to upgrade automatically whenever a new release is available.

All posts and pages were created directly on this instance; no content was imported from another source.

Regarding the logs - I checked the browser console and found the JSON parsing error:

[Cathy_Sarisky]

Any pattern for what posts/pages are impacted? Older? Newer? Random?

[ddm231]

The issue now seems to affect all newly created pages after saving. They fail to load in the editor entirely. Older pages and posts are partially impacted: some can still be opened and edited, while others cannot.

From what I can observe, the problem might be tied to specific JSON data being generated for new pages or posts, as the browser console consistently shows a JSON parsing error.

Let me know if there are specific debugging steps I should follow to narrow this down further.

[Kevin]

For one of the failing posts, can you use the network tab in your browser’s dev tools to inspect the request to the /ghost/api/admin/posts/{id}/ endpoint? If you look at the preview for that request you should have some content in the lexical property of the first post - please share that if it’s not confidential

[ddm231]

{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Cannabis Social Club Dortmund e.V.","type":"extended-text","version":1}],"direction":"ltr","format":"","indent":0,"type":"extended-heading","version":1,"tag":"h3"},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Wir sind ein eingetragener Verein, der sich für eine moderne, aufgeklärte und verantwortungsbewusste Cannabispolitik einsetzt. Unser Ziel ist die Gründung und der Betrieb einer Anbaugemeinschaft, die den kollektiven Anbau von Cannabis von Mitgliedern für Mitglieder im privaten Rahmen organisiert.","type":"extended-text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Wir engagieren uns für eine transparente und qualitätsbewusste Kultivierung von Cannabis, wobei der Schutz junger Menschen sowie Suchtprävention für uns im Vordergrund stehen. Durch den Austausch von Erfahrungen und Wissen streben wir nach stetiger Verbesserung und Professionalisierung.","type":"extended-text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1},{"type":"header","version":2,"size":"small","style":"dark","buttonEnabled":true,"buttonUrl":"https://csc.do/vorstand/","buttonText":"Lerne den Vorstand kennen","header":"<span style="\&quot;white-space:" pre-wrap;\"="">Der Vorstand</span>","subheader":"<span style="\&quot;white-space:" pre-wrap;\"="">Mit Leidenschaft und Kompetenz steuern wir als Vorstand den Kurs unseres Vereins. Von Mitgliederbetreuung bis Behördenkommunikation – wir packen an, wo es nötig ist. Dabei setzen wir auf Transparenz und den engen Austausch mit euch. Eure Ideen sind unser Antrieb. Sprecht uns an – wir sind für euch da!</span>","backgroundImageSrc":"https://csc.do/content/images/2024/10/Gruppenfoto-2.jpg","accentColor":"#0d3c34","alignment":"left","backgroundColor":"accent","backgroundImageWidth":1680,"backgroundImageHeight":1121,"backgroundSize":"cover","textColor":"#FFFFFF","buttonColor":"#ffffff","buttonTextColor":"#000000","layout":"split","swapped":false},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Was ist Cannabis? 🌱","type":"extended-text","version":1}],"direction":"ltr","format":"","indent":0,"type":"extended-heading","version":1,"tag":"h3"},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Die Hanfpflanze, auch Cannabis genannt, zählt zu den ältesten Nutz- und Heilpflanzen der Welt. Bereits im frühen 3. Jahrtausend v. Chr. wurde sie in China angebaut und ihre psychoaktiven Eigenschaften wurden beispielsweise in Indien als Bestandteil kultischer Handlungen genutzt. Seit den 1970er Jahren hat sich Cannabis in vielen westlichen Ländern, darunter auch in Deutschland, als die nach Alkohol zweithäufigste Droge etabliert.","type":"extended-text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"In Deutschland ist der Besitz und Anbau von Cannabis seit dem 1. April 2024 legal, allerdings wurde im Jahr 2017 Cannabis bereits für den medizinischen Gebrauch legalisiert. Die Prohibition von Cannabis begann im 20. Jahrhundert durch internationale Abkommen und nationale Gesetze. Seit dem 1. Juli 2024 dürfen Vereine eine Anbaulizenz bei den Behörden beantragen, um eine Anbauvereinigung zu werden. Die aktuelle Teillegalisierung spiegelt einen Wandel in der Wahrnehmung von Cannabis wider, von einer verbotenen zu einer regulierten Substanz.","type":"extended-text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Aufklärung und Dialog 💬","type":"extended-text","version":1}],"direction":"ltr","format":"","indent":0,"type":"extended-heading","version":1,"tag":"h3"},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Wir setzen uns aktiv für eine Cannabispolitik ein, die den Gesundheitsschutz unterstützt. Dabei ist uns der offene und sachliche Dialog mit Behörden und gesellschaftlichen Akteur:innen besonders wichtig. Durch wissenschaftlich fundierte Aufklärung möchten wir Vorurteile abbauen und einen konstruktiven Austausch über Cannabis fördern.","type":"extended-text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Über die Mitgliedschaft 🤝","type":"extended-text","version":1}],"direction":"ltr","format":"","indent":0,"type":"extended-heading","version":1,"tag":"h3"},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Wenn du mehr über uns erfahren oder Mitglied werden möchtest, trag dich gerne in die ","type":"extended-text","version":1},{"children":[{"detail":0,"format":1,"mode":"normal","style":"","text":"Warteliste","type":"extended-text","version":1}],"direction":"ltr","format":"","indent":0,"type":"link","version":1,"rel":"noreferrer","target":null,"title":null,"url":"https://warteliste.cscdo.de/"},{"detail":0,"format":0,"mode":"normal","style":"","text":" ein. Wir freuen uns darauf, dich kennenzulernen!","type":"extended-text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1},{"children":[{"detail":0,"format":1,"mode":"normal","style":"","text":"Als Mitglied erhältst du:","type":"extended-text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1},{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Zugang zu hochwertigem, schadstofffreiem Cannabis aus kontrolliertem Anbau, sobald die Anbaugenehmigung vorliegt","type":"extended-text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":1},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Austausch mit anderen Mitgliedern","type":"extended-text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":2},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Bildungsangebote und informative Workshops, Seminare und Schulungen über verschiedene Cannabissorten und Anbaumethoden","type":"extended-text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":3},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Möglichkeit zur Mitgestaltung durch Feedback und Ideen","type":"extended-text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":4},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Versorgung mit Cannabis zum Selbstkostenpreis","type":"extended-text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":5}],"direction":"ltr","format":"","indent":0,"type":"list","version":1,"listType":"bullet","start":1,"tag":"ul"},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Wir legen großen Wert auf Transparenz und dokumentieren alle unsere Vereinsaktivitäten sorgfältig.","type":"extended-text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1},{"type":"header","version":2,"size":"small","style":"dark","buttonEnabled":true,"buttonUrl":"https://csc.do/mitgliedschaft","buttonText":"Jetzt mehr erfahren","header":"<span style="\&quot;white-space:" pre-wrap;\"="">Mitgliedschaft</span>","subheader":"<span style="\&quot;white-space:" pre-wrap;\"="">Alle Informationen rund umdie Mitgliedschaft im Überblick</span>","backgroundImageSrc":"https://csc.do/content/images/2024/08/budding-CfSkoM-Wb9c-unsplash-2.jpg","accentColor":"#0d3c34","alignment":"center","backgroundColor":"accent","backgroundImageWidth":2000,"backgroundImageHeight":1334,"backgroundSize":"cover","textColor":"#FFFFFF","buttonColor":"#ffffff","buttonTextColor":"#000000","layout":"full","swapped":false},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Wir sind für dich da! 👋","type":"extended-text","version":1}],"direction":"ltr","format":"","indent":0,"type":"extended-heading","version":1,"tag":"h3"},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Hast du noch Fragen zu unserer Arbeit im Verein? Wir freuen uns über dein Interesse und stehen dir gerne zur Verfügung.","type":"extended-text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Nutze einfach unser ","type":"extended-text","version":1},{"children":[{"detail":0,"format":1,"mode":"normal","style":"","text":"Kontaktformular","type":"extended-text","version":1}],"direction":"ltr","format":"","indent":0,"type":"link","version":1,"rel":"noreferrer","target":null,"title":null,"url":"https://csc.do/kontakt"},{"detail":0,"format":0,"mode":"normal","style":"","text":", um uns eine Nachricht zu senden. Fülle dazu die entsprechenden Felder aus und schildere uns dein Anliegen. Wir werden uns schnellstmöglich mit einer ausführlichen Antwort bei dir melden.","type":"extended-text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":" ","type":"extended-text","version":1}],"direction":null,"format":"","indent":0,"type":"paragraph","version":1}],"direction":"ltr","format":"","indent":0,"type":"root","version":1}}

[Kevin]

Ok, so there’s definitely something weird going on with the header card there. Seems like the contents are being incorrectly escaped somewhere along the line

[Kevin]

I’ve not been able to reproduce that so far myself.

How are you creating those header cards? Are you inserting them manually whilst editing or are they copy/pasted?

Also, do you have anything in your network stack that could be modifying the network responses? Maybe some security-related thing on your host or at an edge (e.g. some Cloudflare security stuff)?

[ddm231]

I’m creating these header cards manually in the editor, not via copy-pasting. However, I’m using Cloudflare Pro for my site, which might be modifying responses or escaping content incorrectly. Could this be causing the issue?

[Kevin]

Could this be causing the issue?

Potentially, yes, depending on which firewall features you have enabled. You could always try turning off the orange cloud and running the same test again - creating a header card as you were previously and trying to open the post - to see if there’s any difference.

[ddm231]

I’ve now tested this by completely disabling Cloudflare and clearing the cache, but unfortunately, the issue persists. The error still occurs when trying to create or open posts with header cards.

It seems unlikely that Cloudflare is causing this, as the problem remains even when Cloudflare is bypassed entirely. Could it be related to how Ghost processes or escapes certain content in the header card? For example, I noticed that the JSON for the header and subheader fields contains improperly escaped attributes, such as:

"header":"<span style=\"\\&quot;white-space:\" pre-wrap;\\\"="">Der Vorstand</span>"

When corrected manually to:

"header":"<span style=\"white-space: pre-wrap;\">Der Vorstand</span>"

…the issue maybe resolves itself. However, I’m not sure how to edit this JSON within Ghost. Is there a way to directly modify the mobiledoc content for a post or page? Or is there a better way to prevent Ghost from generating these improperly escaped fields in the first place?

[Kevin]

What’s confusing here is that we’ve not been able to reproduce the issue and haven’t had any other reports which is pointing towards there being something odd with your setup that’s causing the issue. Especially as you appear to get HTML-escaped content in there somehow.

The lexical field is stringified JSON. The content that the editor creates for the header card text typically looks like this when correctly escaped (this is what I’m seeing when testing):

\"header\":\"<span style=\\\"white-space: pre-wrap;\\\">Testing</span><br><span style=\\\"white-space: pre-wrap;\\\">test</span>\",

Can you check what the editor is saving for you? With the network inspector open, create a post and add the header card with some text. After that can you find the last PUT request to the /posts/{id}/ endpoint and share what is in the posts[0].lexical field?

[ddm231]

Thanks for your response. I followed your instructions to inspect the data being saved by the editor. After creating a new post and adding a header card with the text “Test321,” I checked the last PUT request to /ghost/api/admin/posts/{id}/.
Here’s the content of the posts.lexical field:

{"root":{"children":[{"type":"header","version":2,"size":"small","style":"dark","buttonEnabled":false,"buttonUrl":"","buttonText":"","header":"<span style=\"\\&quot;white-space:\" pre-wrap;\\\"="">Test321</span>","subheader":null,"backgroundImageSrc":"","accentColor":"#0d3c34","alignment":"center","backgroundColor":"#000000","backgroundImageWidth":null,"backgroundImageHeight":null,"backgroundSize":"cover","textColor":"#FFFFFF","buttonColor":"#ffffff","buttonTextColor":"#000000","layout":"full","swapped":false},{"children":[],"direction":null,"format":"","indent":0,"type":"paragraph","version":1}],"direction":null,"format":"","indent":0,"type":"root","version":1}}

Here’s the error I see in the browser console:

[Kevin]

Just to make sure, is that the content from the data sent (Payload) or the data received (Response)?

[ddm231]

The content I shared earlier is from the data sent (Payload) in the PUT request to /ghost/api/admin/posts/{id}/. This is what the editor is saving when I create a post and add a header card.

[Cathy_Sarisky]

That the put request is messed up suggests the Koenig editor or the browser.
What browser and OS are you using? Do you have another browser installed you could try to replicate this with?

[Kevin]

@Cathy_Sarisky

Do you have another browser installed you could try to replicate this with?

Failing that, the same browser in incognito (to ensure extensions are disabled) is also a good test.