From a721df2536e85677eed4bf7f7f45f0e954335453 Mon Sep 17 00:00:00 2001 From: i-just Date: Wed, 14 Jan 2026 09:43:22 +0100 Subject: [PATCH 1/4] use correct set of classes when initialising code editor fields --- src/templates/cke-configs/_edit.twig | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/templates/cke-configs/_edit.twig b/src/templates/cke-configs/_edit.twig index 3d75057a..e8f06d34 100644 --- a/src/templates/cke-configs/_edit.twig +++ b/src/templates/cke-configs/_edit.twig @@ -15,9 +15,8 @@ }) %} {% endif %} -{% set baseCodeEditorOptions = { - wrapperClass: 'monaco-editor-background-frame', -} %} +{% set wrapperClasses = ['monaco-editor-background-frame'] %} +{% set baseCodeEditorOptions = {} %} {% if ckeConfig.uid %} {{ hiddenInput('uid', ckeConfig.uid) }} @@ -134,6 +133,7 @@ id: 'config-options-json-container', class: classes|join(' '), } %} + {% set wrapperClasses = wrapperClasses|push(ckeConfig.hasErrors('json') ? 'has-errors') %} {{ codeEditor.textarea( { id: 'config-options-json', @@ -144,7 +144,7 @@ baseMonacoOptions|merge({ language: 'json', }), - baseCodeEditorOptions|push(ckeConfig.hasErrors('json') ? 'has-errors'), + baseCodeEditorOptions|merge({wrapperClass: wrapperClasses|join(' ')}), ) }} {% endtag %} @@ -170,7 +170,7 @@ baseMonacoOptions|merge({ language: 'javascript', }), - baseCodeEditorOptions, + baseCodeEditorOptions|merge({wrapperClass: wrapperClasses|join(' ')}), ) }} {% endtag %} {% endblock %} @@ -201,6 +201,7 @@ })() {% endjs %} +{% set wrapperClasses = wrapperClasses|push(readOnly ? 'disabled') %} {{ codeEditor.textareaField( { label: 'Custom Styles'|t('ckeditor'), @@ -215,7 +216,5 @@ baseMonacoOptions|merge({ language: 'css', }), - baseCodeEditorOptions|merge({ - wrapperClass: readOnly ? 'disabled' : null, - }), + baseCodeEditorOptions|merge({wrapperClass: wrapperClasses|join(' ')}), ) }} From 3a3c8bd87fb67e7c1a5153c70de6278f63065f8f Mon Sep 17 00:00:00 2001 From: i-just Date: Wed, 14 Jan 2026 09:43:34 +0100 Subject: [PATCH 2/4] switch from merge to push --- src/templates/cke-configs/_edit.twig | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/templates/cke-configs/_edit.twig b/src/templates/cke-configs/_edit.twig index e8f06d34..d8cff692 100644 --- a/src/templates/cke-configs/_edit.twig +++ b/src/templates/cke-configs/_edit.twig @@ -123,10 +123,10 @@ {% set classes = [] %} {% if not isJson %} - {% set classes = classes|merge(['hidden']) %} + {% set classes = classes|push('hidden') %} {% endif %} {% if readOnly %} - {% set classes = classes|merge(['disabled']) %} + {% set classes = classes|push('disabled') %} {% endif %} {% tag 'div' with { @@ -151,10 +151,10 @@ {% set classes = [] %} {% if not isJs %} - {% set classes = classes|merge(['hidden']) %} + {% set classes = classes|push('hidden') %} {% endif %} {% if readOnly %} - {% set classes = classes|merge(['disabled']) %} + {% set classes = classes|push('disabled') %} {% endif %} {% tag 'div' with { id: 'config-options-js-container', From e9ff7a3f90b53cc0a995dd7b62a1b2f57e032b21 Mon Sep 17 00:00:00 2001 From: i-just Date: Wed, 14 Jan 2026 09:43:47 +0100 Subject: [PATCH 3/4] added style for has-errors class --- src/web/assets/ckeconfig/dist/css/ckeconfig.css | 2 +- src/web/assets/ckeconfig/dist/css/ckeconfig.css.map | 2 +- src/web/assets/ckeconfig/src/ckeconfig.css | 4 ++++ 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/web/assets/ckeconfig/dist/css/ckeconfig.css b/src/web/assets/ckeconfig/dist/css/ckeconfig.css index 172fcba7..b4a7e959 100644 --- a/src/web/assets/ckeconfig/dist/css/ckeconfig.css +++ b/src/web/assets/ckeconfig/dist/css/ckeconfig.css @@ -1,2 +1,2 @@ -.ckeditor-tb{background-color:var(--gray-050);border:1px solid var(--hairline-color);box-shadow:none;overflow:hidden;padding:calc(var(--m) - var(--ck-spacing-small)) var(--m) 0}.errors>.ckeditor-tb{border-color:var(--error-color)}.ckeditor-tb:after{background:-o-linear-gradient(top,hsl(var(--gray-050-hsl),0),hsl(var(--gray-050-hsl),1));background:linear-gradient(to bottom,hsl(var(--gray-050-hsl),0),hsl(var(--gray-050-hsl),1));border-radius:0 0 calc(var(--small-border-radius)) calc(var(--small-border-radius));bottom:0;content:"";height:calc(var(--m)*2 - 1px);left:0;position:absolute;right:0}.ckeditor-tb--item,.ckeditor-tb--items{--ckeditor-min-item-height:calc(var(--ck-font-size-base)*var(--ck-line-height-base) + var(--ck-spacing-tiny)*2)!important}.ckeditor-tb .ck.ck-toolbar__items{-webkit-align-items:stretch!important;align-items:stretch!important;min-height:calc(var(--ckeditor-min-item-height) + var(--ck-spacing-small)*2)!important}.ckeditor-tb--insertion,.ckeditor-tb--item{border-radius:var(--small-border-radius);display:-webkit-flex;display:flex;min-width:var(--xl)}.ckeditor-tb--item{-webkit-align-items:center;align-items:center;background-color:rgba(96,125,159,.075)!important;-webkit-justify-content:center;justify-content:center;min-height:var(--ckeditor-min-item-height)!important}.ckeditor-tb--item:not(.draghelper){position:relative!important}.ckeditor-tb--item.draghelper{background-color:var(--white)!important;border:none!important;box-shadow:0 0 0 1px rgba(31,41,51,.15),0 2px 6px -2px rgba(31,41,51,.1)!important}body:not(.dragging) .ckeditor-tb--item:hover{background-color:var(--ui-control-bg-color)!important}.ckeditor-tb--insertion{border:2px dashed var(--ck-color-base-border)!important}.ckeditor-tb--separator .ck.ck-toolbar__separator{-webkit-align-self:center!important;align-self:center!important;background:rgba(96,125,159,.5)!important;display:inline-block!important;height:calc(var(--ckeditor-min-item-height) - var(--ck-spacing-tiny)*2)!important;margin:0!important}.ckeditor-tb--item>:not(.ck-toolbar__line-break):not(:first-child){margin-left:var(--ck-spacing-small)}.ckeditor-tb--item:after{bottom:0!important;content:"";cursor:-webkit-grab;cursor:grab;left:0!important;position:absolute;right:0!important;top:0!important}.disabled .ckeditor-tb--item:after{cursor:not-allowed}.ckeditor-tb--source .ck.ck-toolbar{background-color:transparent!important;border:none;margin-bottom:calc(var(--m) - var(--ck-spacing-small));padding:0}.ckeditor-tb--target{position:relative}.ckeditor-tb--target .ck.ck-toolbar{box-shadow:0 2px 2px -1px hsl(var(--gray-900-hsl),.1),0 4px 14px -4px hsl(var(--gray-900-hsl),.1);position:relative}.ckeditor-tb--target .ck.ck-content{border-bottom:none;border-radius:0!important;height:calc(var(--m)*2)}.offset-drag-helper .ck.ck-toolbar{background:none!important;border:none!important;box-shadow:none!important;padding:0!important} +.ckeditor-tb{background-color:var(--gray-050);border:1px solid var(--hairline-color);box-shadow:none;overflow:hidden;padding:calc(var(--m) - var(--ck-spacing-small)) var(--m) 0}.errors>.ckeditor-tb{border-color:var(--error-color)}.ckeditor-tb:after{background:-o-linear-gradient(top,hsl(var(--gray-050-hsl),0),hsl(var(--gray-050-hsl),1));background:linear-gradient(to bottom,hsl(var(--gray-050-hsl),0),hsl(var(--gray-050-hsl),1));border-radius:0 0 calc(var(--small-border-radius)) calc(var(--small-border-radius));bottom:0;content:"";height:calc(var(--m)*2 - 1px);left:0;position:absolute;right:0}.ckeditor-tb--item,.ckeditor-tb--items{--ckeditor-min-item-height:calc(var(--ck-font-size-base)*var(--ck-line-height-base) + var(--ck-spacing-tiny)*2)!important}.ckeditor-tb .ck.ck-toolbar__items{-webkit-align-items:stretch!important;align-items:stretch!important;min-height:calc(var(--ckeditor-min-item-height) + var(--ck-spacing-small)*2)!important}.ckeditor-tb--insertion,.ckeditor-tb--item{border-radius:var(--small-border-radius);display:-webkit-flex;display:flex;min-width:var(--xl)}.ckeditor-tb--item{-webkit-align-items:center;align-items:center;background-color:rgba(96,125,159,.075)!important;-webkit-justify-content:center;justify-content:center;min-height:var(--ckeditor-min-item-height)!important}.ckeditor-tb--item:not(.draghelper){position:relative!important}.ckeditor-tb--item.draghelper{background-color:var(--white)!important;border:none!important;box-shadow:0 0 0 1px rgba(31,41,51,.15),0 2px 6px -2px rgba(31,41,51,.1)!important}body:not(.dragging) .ckeditor-tb--item:hover{background-color:var(--ui-control-bg-color)!important}.ckeditor-tb--insertion{border:2px dashed var(--ck-color-base-border)!important}.ckeditor-tb--separator .ck.ck-toolbar__separator{-webkit-align-self:center!important;align-self:center!important;background:rgba(96,125,159,.5)!important;display:inline-block!important;height:calc(var(--ckeditor-min-item-height) - var(--ck-spacing-tiny)*2)!important;margin:0!important}.ckeditor-tb--item>:not(.ck-toolbar__line-break):not(:first-child){margin-left:var(--ck-spacing-small)}.ckeditor-tb--item:after{bottom:0!important;content:"";cursor:-webkit-grab;cursor:grab;left:0!important;position:absolute;right:0!important;top:0!important}.disabled .ckeditor-tb--item:after{cursor:not-allowed}.ckeditor-tb--source .ck.ck-toolbar{background-color:transparent!important;border:none;margin-bottom:calc(var(--m) - var(--ck-spacing-small));padding:0}.ckeditor-tb--target{position:relative}.ckeditor-tb--target .ck.ck-toolbar{box-shadow:0 2px 2px -1px hsl(var(--gray-900-hsl),.1),0 4px 14px -4px hsl(var(--gray-900-hsl),.1);position:relative}.ckeditor-tb--target .ck.ck-content{border-bottom:none;border-radius:0!important;height:calc(var(--m)*2)}.offset-drag-helper .ck.ck-toolbar{background:none!important;border:none!important;box-shadow:none!important;padding:0!important}.monaco-editor.has-errors{border:1px solid var(--fg-error)!important} /*# sourceMappingURL=ckeconfig.css.map*/ \ No newline at end of file diff --git a/src/web/assets/ckeconfig/dist/css/ckeconfig.css.map b/src/web/assets/ckeconfig/dist/css/ckeconfig.css.map index ce3de746..9cb2dccb 100644 --- a/src/web/assets/ckeconfig/dist/css/ckeconfig.css.map +++ b/src/web/assets/ckeconfig/dist/css/ckeconfig.css.map @@ -1 +1 @@ -{"version":3,"file":"css/ckeconfig.css","mappings":"AAAA,aAIE,iCACA,uCACA,gBAJA,gBADA,2DAKA,CAGF,qBACE,gCAGF,mBASE,qLAFA,oFAHA,SAHA,WAKA,8BADA,OAHA,kBACA,OAMA,CAOF,uCAEE,0HAMF,mCACE,oEACA,uFAKF,2CAGE,yCADA,kCAEA,oBAGF,mBACE,8CAGA,iDAFA,sDACA,oDACA,CAGF,oCACE,4BAGF,8BAEE,wCADA,sBAEA,kFACE,CAIJ,6CACE,sDAGF,wBACE,wDAGF,kDAEE,gEAKA,yCANA,+BAEA,kFAGA,kBACA,CAGF,mEACE,oCAGF,yBAKE,mBAJA,WAMA,gCADA,iBAJA,kBAEA,kBADA,eAIA,CAGF,mCACE,mBAGF,oCAGE,uCAFA,YAGA,uDAFA,SAEA,CAGF,qBACE,kBAGF,oCACE,iGACE,CAEF,kBAGF,oCAGE,mBADA,0BADA,uBAEA,CAGF,mCAEE,0BADA,sBAEA,0BACA","sources":["webpack:///./ckeconfig.css"],"sourcesContent":[".ckeditor-tb {\n padding: calc(var(--m) - var(--ck-spacing-small)) var(--m) 0;\n overflow: hidden;\n /* use the `#content .pane` styles in slideouts too */\n background-color: var(--gray-050);\n border: 1px solid var(--hairline-color);\n box-shadow: none;\n}\n\n.errors > .ckeditor-tb {\n border-color: var(--error-color);\n}\n\n.ckeditor-tb:after {\n content: '';\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n height: calc(var(--m) * 2 - 1px);\n border-radius: 0 0 calc(var(--small-border-radius))\n calc(var(--small-border-radius));\n background: linear-gradient(\n to bottom,\n hsl(var(--gray-050-hsl), 0),\n hsl(var(--gray-050-hsl), 1)\n );\n}\n\n.ckeditor-tb--items,\n.ckeditor-tb--item {\n --ckeditor-min-item-height: calc(\n var(--ck-font-size-base) * var(--ck-line-height-base) +\n var(--ck-spacing-tiny) * 2\n ) !important;\n}\n\n.ckeditor-tb .ck.ck-toolbar__items {\n align-items: stretch !important;\n min-height: calc(\n var(--ckeditor-min-item-height) + var(--ck-spacing-small) * 2\n ) !important;\n}\n\n.ckeditor-tb--item,\n.ckeditor-tb--insertion {\n display: flex;\n border-radius: var(--small-border-radius);\n min-width: var(--xl);\n}\n\n.ckeditor-tb--item {\n align-items: center;\n justify-content: center;\n min-height: var(--ckeditor-min-item-height) !important;\n background-color: hsl(212, 25%, 50%, 0.075) !important;\n}\n\n.ckeditor-tb--item:not(.draghelper) {\n position: relative !important;\n}\n\n.ckeditor-tb--item.draghelper {\n border: none !important;\n background-color: var(--white) !important;\n box-shadow:\n 0 0 0 1px hsla(210, 24%, 16%, 0.15),\n 0 2px 6px -2px hsla(210, 24%, 16%, 0.1) !important;\n}\n\nbody:not(.dragging) .ckeditor-tb--item:hover {\n background-color: var(--ui-control-bg-color) !important;\n}\n\n.ckeditor-tb--insertion {\n border: 2px dashed var(--ck-color-base-border) !important;\n}\n\n.ckeditor-tb--separator .ck.ck-toolbar__separator {\n display: inline-block !important;\n align-self: center !important;\n height: calc(\n var(--ckeditor-min-item-height) - var(--ck-spacing-tiny) * 2\n ) !important;\n margin: 0 !important;\n background: hsl(212, 25%, 50%, 0.5) !important;\n}\n\n.ckeditor-tb--item > :not(.ck-toolbar__line-break):not(:first-child) {\n margin-left: var(--ck-spacing-small);\n}\n\n.ckeditor-tb--item:after {\n content: '';\n position: absolute;\n top: 0 !important;\n right: 0 !important;\n bottom: 0 !important;\n left: 0 !important;\n cursor: grab;\n}\n\n.disabled .ckeditor-tb--item:after {\n cursor: not-allowed;\n}\n\n.ckeditor-tb--source .ck.ck-toolbar {\n border: none;\n padding: 0;\n background-color: transparent !important;\n margin-bottom: calc(var(--m) - var(--ck-spacing-small));\n}\n\n.ckeditor-tb--target {\n position: relative;\n}\n\n.ckeditor-tb--target .ck.ck-toolbar {\n box-shadow:\n 0 2px 2px -1px hsl(var(--gray-900-hsl), 0.1),\n 0 4px 14px -4px hsl(var(--gray-900-hsl), 0.1);\n position: relative;\n}\n\n.ckeditor-tb--target .ck.ck-content {\n height: calc(var(--m) * 2);\n border-radius: 0 !important;\n border-bottom: none;\n}\n\n.offset-drag-helper .ck.ck-toolbar {\n border: none !important;\n background: none !important;\n box-shadow: none !important;\n padding: 0 !important;\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"css/ckeconfig.css","mappings":"AAAA,aAIE,iCACA,uCACA,gBAJA,gBADA,2DAKA,CAGF,qBACE,gCAGF,mBASE,qLAFA,oFAHA,SAHA,WAKA,8BADA,OAHA,kBACA,OAMA,CAOF,uCAEE,0HAMF,mCACE,oEACA,uFAKF,2CAGE,yCADA,kCAEA,oBAGF,mBACE,8CAGA,iDAFA,sDACA,oDACA,CAGF,oCACE,4BAGF,8BAEE,wCADA,sBAEA,kFACE,CAIJ,6CACE,sDAGF,wBACE,wDAGF,kDAEE,gEAKA,yCANA,+BAEA,kFAGA,kBACA,CAGF,mEACE,oCAGF,yBAKE,mBAJA,WAMA,gCADA,iBAJA,kBAEA,kBADA,eAIA,CAGF,mCACE,mBAGF,oCAGE,uCAFA,YAGA,uDAFA,SAEA,CAGF,qBACE,kBAGF,oCACE,iGACE,CAEF,kBAGF,oCAGE,mBADA,0BADA,uBAEA,CAGF,mCAEE,0BADA,sBAEA,0BACA,oBAGF,0BACE","sources":["webpack:///./ckeconfig.css"],"sourcesContent":[".ckeditor-tb {\n padding: calc(var(--m) - var(--ck-spacing-small)) var(--m) 0;\n overflow: hidden;\n /* use the `#content .pane` styles in slideouts too */\n background-color: var(--gray-050);\n border: 1px solid var(--hairline-color);\n box-shadow: none;\n}\n\n.errors > .ckeditor-tb {\n border-color: var(--error-color);\n}\n\n.ckeditor-tb:after {\n content: '';\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n height: calc(var(--m) * 2 - 1px);\n border-radius: 0 0 calc(var(--small-border-radius))\n calc(var(--small-border-radius));\n background: linear-gradient(\n to bottom,\n hsl(var(--gray-050-hsl), 0),\n hsl(var(--gray-050-hsl), 1)\n );\n}\n\n.ckeditor-tb--items,\n.ckeditor-tb--item {\n --ckeditor-min-item-height: calc(\n var(--ck-font-size-base) * var(--ck-line-height-base) +\n var(--ck-spacing-tiny) * 2\n ) !important;\n}\n\n.ckeditor-tb .ck.ck-toolbar__items {\n align-items: stretch !important;\n min-height: calc(\n var(--ckeditor-min-item-height) + var(--ck-spacing-small) * 2\n ) !important;\n}\n\n.ckeditor-tb--item,\n.ckeditor-tb--insertion {\n display: flex;\n border-radius: var(--small-border-radius);\n min-width: var(--xl);\n}\n\n.ckeditor-tb--item {\n align-items: center;\n justify-content: center;\n min-height: var(--ckeditor-min-item-height) !important;\n background-color: hsl(212, 25%, 50%, 0.075) !important;\n}\n\n.ckeditor-tb--item:not(.draghelper) {\n position: relative !important;\n}\n\n.ckeditor-tb--item.draghelper {\n border: none !important;\n background-color: var(--white) !important;\n box-shadow:\n 0 0 0 1px hsla(210, 24%, 16%, 0.15),\n 0 2px 6px -2px hsla(210, 24%, 16%, 0.1) !important;\n}\n\nbody:not(.dragging) .ckeditor-tb--item:hover {\n background-color: var(--ui-control-bg-color) !important;\n}\n\n.ckeditor-tb--insertion {\n border: 2px dashed var(--ck-color-base-border) !important;\n}\n\n.ckeditor-tb--separator .ck.ck-toolbar__separator {\n display: inline-block !important;\n align-self: center !important;\n height: calc(\n var(--ckeditor-min-item-height) - var(--ck-spacing-tiny) * 2\n ) !important;\n margin: 0 !important;\n background: hsl(212, 25%, 50%, 0.5) !important;\n}\n\n.ckeditor-tb--item > :not(.ck-toolbar__line-break):not(:first-child) {\n margin-left: var(--ck-spacing-small);\n}\n\n.ckeditor-tb--item:after {\n content: '';\n position: absolute;\n top: 0 !important;\n right: 0 !important;\n bottom: 0 !important;\n left: 0 !important;\n cursor: grab;\n}\n\n.disabled .ckeditor-tb--item:after {\n cursor: not-allowed;\n}\n\n.ckeditor-tb--source .ck.ck-toolbar {\n border: none;\n padding: 0;\n background-color: transparent !important;\n margin-bottom: calc(var(--m) - var(--ck-spacing-small));\n}\n\n.ckeditor-tb--target {\n position: relative;\n}\n\n.ckeditor-tb--target .ck.ck-toolbar {\n box-shadow:\n 0 2px 2px -1px hsl(var(--gray-900-hsl), 0.1),\n 0 4px 14px -4px hsl(var(--gray-900-hsl), 0.1);\n position: relative;\n}\n\n.ckeditor-tb--target .ck.ck-content {\n height: calc(var(--m) * 2);\n border-radius: 0 !important;\n border-bottom: none;\n}\n\n.offset-drag-helper .ck.ck-toolbar {\n border: none !important;\n background: none !important;\n box-shadow: none !important;\n padding: 0 !important;\n}\n\n.monaco-editor.has-errors {\n border: 1px solid var(--fg-error) !important;\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/src/web/assets/ckeconfig/src/ckeconfig.css b/src/web/assets/ckeconfig/src/ckeconfig.css index f107e43b..89f5aa6f 100644 --- a/src/web/assets/ckeconfig/src/ckeconfig.css +++ b/src/web/assets/ckeconfig/src/ckeconfig.css @@ -134,3 +134,7 @@ body:not(.dragging) .ckeditor-tb--item:hover { box-shadow: none !important; padding: 0 !important; } + +.monaco-editor.has-errors { + border: 1px solid var(--fg-error) !important; +} From 237130cca6596de5f0a69d7f0dd79a4482f9865a Mon Sep 17 00:00:00 2001 From: brandonkelly Date: Wed, 18 Feb 2026 14:07:55 -0800 Subject: [PATCH 4/4] Release notes [ci skip] --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e19aa611..0409ad3a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ ## Unreleased - Fixed a bug where CKEditor field values weren’t always getting propagated to other sites (with duplicated nested entries) when creating a new element. ([#479](https://github.com/craftcms/ckeditor/pull/479)) +- Fixed styling issues on CKEditor config edit screens. ([#494](https://github.com/craftcms/ckeditor/pull/494)) ## 4.11.0 - 2025-11-19