CKEditor Config Page Toolbar Builder Broken - Monaco JSON race condition

[MattAppleton]

Bug Report: CKEditor Config Page Toolbar Builder Broken

Summary

The CKEditor config page (/admin/settings/ckeditor/{uuid}) fails to render the toolbar builder due to a race condition where inline JavaScript tries to access monaco.languages.json.jsonDefaults before Monaco's JSON language features have finished loading.

Environment

• Craft CMS: 5.8.22 (Pro)
• CKEditor Plugin: 4.11.0 (also reproduced on 4.10.1)
• Code Editor (nystudio107/craft-code-editor): 1.0.28
• PHP: 8.2
• Browser: Chrome (latest)
• OS: macOS

Steps to Reproduce

1. Install Craft CMS 5.x with CKEditor plugin 4.11.0
2. Navigate to Settings → CKEditor
3. Click on any existing config (e.g., "Simple") or create a new one
4. Observe the Toolbar section - no toolbar items appear to drag

Expected Behavior

The toolbar builder should display:

• A source area with all available toolbar items (Bold, Italic, Link, etc.)
• A target area where items can be dragged to configure the toolbar

Actual Behavior

Both the source and target areas in the toolbar builder are empty. The page appears to load but the toolbar items never render.

Console Errors

Two JavaScript errors appear in sequence:

Error 1: Monaco JSON defaults undefined

TypeError: Cannot read properties of undefined (reading 'jsonDefaults')
    at https://[site]/admin/settings/ckeditor/[uuid]:816:25

This occurs in the inline script at approximately line 191 of _edit.twig:

monaco.languages.json.jsonDefaults.setDiagnosticsOptions({...})

Error 2: Toolbar builder fails

TypeError: Cannot read properties of undefined (reading 'join')
    at n.value (ckeditor5-craftcms.js:1:1145179)

This cascades from the first error, causing the toolbar builder initialization to fail.

Root Cause Analysis

The issue is a race condition between:

1. Monaco Editor loading its JSON language features asynchronously via web workers (json.worker.js)
2. CKEditor's inline script immediately trying to access monaco.languages.json.jsonDefaults

The web workers are loading (verified via Network tab showing pending requests to json.worker.js) but the inline script doesn't wait for them to complete.

Evidence

• typeof monaco → "object" (Monaco core is loaded)
• typeof monaco.languages → "object" (languages namespace exists)
• typeof monaco.languages.json → "undefined" (JSON features not yet loaded)
• Network requests to json.worker.js show status "pending" when error occurs

Suggested Fix

The inline script in src/templates/cke-configs/_edit.twig (around line 191) should wait for Monaco's JSON language features to be available before trying to configure them.

Option A: Wrap in a check/retry:

(() => {
  const configureJsonSchema = () => {
    if (typeof monaco?.languages?.json?.jsonDefaults === 'undefined') {
      setTimeout(configureJsonSchema, 100);
      return;
    }
    // existing jsonDefaults configuration code...
  };
  configureJsonSchema();
})()

Option B: Use Monaco's onLanguage event:

monaco.languages.onLanguage('json', () => {
  monaco.languages.json.jsonDefaults.setDiagnosticsOptions({...});
});

Workaround

Users can edit CKEditor configs directly via YAML files in config/project/ckeditor/configs/ instead of using the CP interface.

Additional Notes

• The toolbar items ARE defined correctly in the YAML config files
• The CKEditor fields work correctly on entry edit pages
• Only the CKEditor config editor page in the CP is affected
• Issue persists across browser cache clears and plugin reinstalls

Related Issues

• #150 - monaco is not defined on CP CKEditor configs - Similar Monaco loading issue, fixed in code-editor 1.0.16

[linear[bot]]

PT-3023

[i-just]

Hi, thanks for getting in touch! This was previously reported here: https://github.com/craftcms/ckeditor/issues/492, and you can find a few more details there.

[peirix]

This is an issue even without Code Editor installed, this is my current composer file:

"craftcms/ckeditor": "4.11.0",
"craftcms/cms": "5.8.22",
"mmikkel/retcon": "3.2.2",
"mutation/translate": "4.2.1",
"nystudio107/craft-vite": "5.0.1",
"vaersaagod/dospaces": "3.2.1",
"verbb/navigation": "3.0.15",
"vlucas/phpdotenv": "^5.4.0"

And here is a screenshot of the error:

[jishi]

I'm seeing the same error in Craft 4 and CKEditor 5 without Code Editor. I do have

Formie Redirect Manager Super Table Tags Webhooks

But I don't think any of those interact with CDKEditor though.

[tommysvr]

@peirix @jishi Code Editor is a requirement of CkEditor: https://github.com/craftcms/ckeditor/blob/4.x/composer.json#L31

If you add "nystudio107/craft-code-editor": "1.0.27" to your composer.json and run composer update, that should resolve it for now.

[jishi]

I thought someone suspected that there was some conflict if you had them both. If it's a child dependency then I surely have it :D

So the bug is still valid it seems.

[tommysvr]

@jishi yep, the report remains open: https://github.com/nystudio107/craft-code-editor/issues/18

The fix is just for the meantime until the root cause can be resolved.

[russback]

@tommysvr I'm still getting this even with nystudio107/craft-code-editor installed. This is on CKEditor v3.15.0 on Craft v 5.8.23.

[tommysvr]

@russback could you please send your composer.json and composer.lock to [email protected]?

[antistatic]

Experiencing the same issue on a number of Craft sites running the latest version of Craft 5

[tommysvr]

@antistatic tested and confirmed the temporary fix remains the same on 5.9.x:

add "nystudio107/craft-code-editor": "1.0.27" to your composer.json and run composer update

[i-just]

Hi All,

This has now been fixed as per https://github.com/nystudio107/craft-code-editor/issues/18.

You can remove the temporary workaround and run composer update nystudio107/craft-code-editor or just composer update to pull the latest version of the Craft Code Editor.