Enabling CKEditor 5 Font Plugins and adding text color icon causes editor to loose icons

Hi @noonoos

It looks like editor initialization error. Can you please provide a developer condsole output from page where edior is in source mode? That would help us greatly finding out the issue.

Uncaught ReferenceError: CKEditor5 is not defined
237 https://cdn.ckeditor.com/ckeditor5/41.3.1/dll/font/font.js:5
o https://cdn.ckeditor.com/ckeditor5/41.3.1/dll/font/font.js:5
782 https://cdn.ckeditor.com/ckeditor5/41.3.1/dll/font/font.js:5
o https://cdn.ckeditor.com/ckeditor5/41.3.1/dll/font/font.js:5
https://cdn.ckeditor.com/ckeditor5/41.3.1/dll/font/font.js:5
https://cdn.ckeditor.com/ckeditor5/41.3.1/dll/font/font.js:5
https://cdn.ckeditor.com/ckeditor5/41.3.1/dll/font/font.js:5
font.js:5:3612
237 https://cdn.ckeditor.com/ckeditor5/41.3.1/dll/font/font.js:5
o https://cdn.ckeditor.com/ckeditor5/41.3.1/dll/font/font.js:5
782 https://cdn.ckeditor.com/ckeditor5/41.3.1/dll/font/font.js:5
o https://cdn.ckeditor.com/ckeditor5/41.3.1/dll/font/font.js:5
https://cdn.ckeditor.com/ckeditor5/41.3.1/dll/font/font.js:5
https://cdn.ckeditor.com/ckeditor5/41.3.1/dll/font/font.js:5
https://cdn.ckeditor.com/ckeditor5/41.3.1/dll/font/font.js:5
Failed to load font - FontColor js_vowjISYU9t75fAPZA5D5snrr9eWJHEY1ke4wGj0KUVs.js:13:1722
Failed to load font - FontBackgroundColor js_vowjISYU9t75fAPZA5D5snrr9eWJHEY1ke4wGj0KUVs.js:13:1722
Debugging can be done with an unminified version of CKEditor by installing from the source file. Consult documentation at https://www.drupal.org/node/3258901 → js_vowjISYU9t75fAPZA5D5snrr9eWJHEY1ke4wGj0KUVs.js:13:5269
CKEditorError: plugincollection-plugin-not-found {"plugin":null}
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#erro...
i https://noosnoodles.ddev.site/sites/default/files/js/js_L-oVbSZw3RZvGhL1...
js_vowjISYU9t75fAPZA5D5snrr9eWJHEY1ke4wGj0KUVs.js:13:5443

Hi @noonoos
Can you also provide your text format configuration file?

G'day @dolszewski
Need some guidance on this one.
I'm assuming the configuration is stored in the DB? If not where?
Thanks

As added information to the issue.
Previously had ckeditor5_font 1.1@beta installed which worked fine.
Module was removed.

At /admin/config/development/configuration/single/export
please select "Text editor" in "Configuration type" and then in "Configuration name" select config for the text format where you enabled font plugins.
The config we're asking for will be printed in the textarea below.

Also in first post you mentioned "Unable to add color" - can you describe that point more - any error was shown (Drupal ststus or js console)?
I tried to reproduce (Drupal 10.3.1, module version 1.1.0) and so far couldn't make that issue appear.

uuid: f597af6a-b426-4af8-a5af-798518ccf651
langcode: en
status: true
dependencies:
config:
- filter.format.full_html
module:
- ckeditor5
format: full_html
editor: ckeditor5
settings:
toolbar:
items:
- undo
- redo
- '|'
- heading
- bold
- italic
- underline
- strikethrough
- fontColor
- removeFormat
- '|'
- icon
- sourceEditing
- specialCharacters
- horizontalLine
- '|'
- link
- drupalMedia
- drupalInsertImage
- insertTable
- blockQuote
- '|'
- bulletedList
- numberedList
- indent
- outdent
- '|'
- subscript
- superscript
- '|'
- code
- codeBlock
plugins:
ckeditor5_codeBlock:
languages:
-
label: 'Plain text'
language: plaintext
-
label: C
language: c
-
label: 'C#'
language: cs
-
label: C++
language: cpp
-
label: CSS
language: css
-
label: Diff
language: diff
-
label: HTML
language: html
-
label: Java
language: java
-
label: JavaScript
language: javascript
-
label: PHP
language: php
-
label: Python
language: python
-
label: Ruby
language: ruby
-
label: TypeScript
language: typescript
-
label: XML
language: xml
ckeditor5_heading:
enabled_headings:
- heading1
- heading2
- heading3
- heading4
- heading5
- heading6
ckeditor5_icons_icon:
fa_version: '6'
fa_styles:
- solid
- regular
- brands
custom_metadata: false
async_metadata: true
recommended_enabled: false
ckeditor5_imageResize:
allow_resize: true
ckeditor5_list:
properties:
reversed: true
startIndex: true
multiBlock: true
ckeditor5_plugin_pack_font__font_color:
colors: { }
use_default_colors: false
ckeditor5_sourceEditing:
allowed_tags: { }
media_media:
allow_view_mode_override: false
image_upload:
status: true
scheme: private
directory: inline-images
max_size: null
max_dimensions:
width: null
height: null

Re colour selection

"Add Color" press results in brief timer wheel then returns to original screen ie just the button.

Following Uncaught message repeated 4 times

Uncaught
Object { message: "\nAn AJAX HTTP error occurred.\nHTTP Result Code: 200\nDebugging information follows.\nPath: /admin/config/content/formats/manage/full_html?destination=/admin/config/content/formats&ajax_form=1\nStatusText: OK\nResponseText: Warning: Undefined array key "type" in Drupal\\ckeditor5_plugin_pack_font\\Plugin\\CKEditor5Plugin\\FontColor->buildConfigurationForm() (line 83 of /var/www/html/web/modules/contrib/ckeditor5_plugin_pack/modules/ckeditor5_plugin_pack_font/src/Plugin/CKEditor5Plugin/FontColor.php). => Sfdump = window.Sfdump || (function (doc) { doc.documentElement.classList.add('sf-js-enabled'); var rxEsc = /([.*+?^${}()|\\[\\]\\/\\\\])/g, idRx = /\\bsf-dump-\\d+-ref[012]\\w+\\b/, keyHint = 0 30: Drupal\\ckeditor5_plugin_pack_font\\Plugin\\CKEditor5Plugin\\FontColor->buildConfigurationForm()\" => array:2 [\n\"file\" => \"modules/contrib/ckeditor5_plugin_pack/modules/ckeditor5_plugin_pack_font/src/Plugin/CKEditor5Plugin/FontColor.php:83\"\n\"args\" => array:2 [\n0 => array:2 [\n\"use_default_colors\" =…", name: "AjaxError", stack: "@https://noosnoodles.ddev.site/sites/default/files/js/js_BiJ8andAMrDkEyFE...\n@https://noosnoodles.ddev.site/sites/default/files/js/js_BiJ8andAMrDkEyFE...\n" }
js_BiJ8andAMrDkEyFE6tQcSRfieB1WrUm9dQGVYbWOmu4.js:12:2411

Also the following warning messages

The script element has a malformed hash in its integrity attribute: "c8e5a6b733". The correct format is "-". full_html
The integrity attribute does not contain any valid metadata. full_html
The script element has a malformed hash in its integrity attribute: "c8e5a6b733". The correct format is "-". full_html
The integrity attribute does not contain any valid metadata. full_html
The script element has a malformed hash in its integrity attribute: "c8e5a6b733". The correct format is "-". full_html
The integrity attribute does not contain any valid metadata. full_html
The script element has a malformed hash in its integrity attribute: "c8e5a6b733". The correct format is "-". full_html
The integrity attribute does not contain any valid metadata. full_html
The script element has a malformed hash in its integrity attribute: "c8e5a6b733". The correct format is "-". full_html
The integrity attribute does not contain any valid metadata. full_html
The script element has a malformed hash in its integrity attribute: "c8e5a6b733". The correct format is "-". full_html
The integrity attribute does not contain any valid metadata. full_html
The script element has a malformed hash in its integrity attribute: "c8e5a6b733". The correct format is "-". 6 full_html
Loading failed for the

Console output using Chromium (and Font awesome uninstalled)

Uncaught ReferenceError: CKEditor5 is not defined
at 237 (font.js:5:3622)
at o (font.js:5:3739)
at 782 (font.js:5:3418)
at o (font.js:5:3739)
at font.js:5:4490
at font.js:5:21868
at font.js:5:21919
js_4SUWXrCtcujONBhXG1L3VbReHK42CoMog2QOSCAurM0.js?scope=footer&delta=8&language=en&theme=claro&include=eJyNVNtyozAM_SE3PO0HbDvt087sJzDCCHBjW64sp5evrw0xCaTTyQtI5-iCbmjygh-SwDY9pwD2oFfkwRp_jEoTYyVBiznhTGzw3oCl8QCv8KE89Ste5I2hJmshxC0ISUiTCxZlSwh0FhljIB9z3m1KptAlEfIqgEwVLvIMlKDNu-lHlI1fFBCMyqFPbTIVPatqMFaQK7poSh-xN0L8pzG5N-zn7Es5lTmgCxNEE-8ynsTZZz8aj3eZGwfjlWUbbMq-bQB9PH9pG-g9N6pvu8-l2Itz6cNA7ED2TGdJH98S1aZfmMt8r7F4EyFAFHxhcv-HweibMJESa3zOmvGjMk6vQyjypcC9n85b81g-7q7uuCzAPsS8OT-3rB3yhjflsXeaiM1XxsH-m0ezZY3v8daH0dEJX35scAyo82E8TcD5cJCjWpjahUU7H48qV7cufpaVtsC0XhKcHnJRUQmR7YCb81tB73JhO_QgjPgLlUs95cXeUxg1BPxb3JT-7c9Qk0eUMtvYCsPnemHXoOrM2AYTsKnCN3votjQ:13 Failed to load font - FontColor
(anonymous) @ js_4SUWXrCtcujONBhXG1L3VbReHK42CoMog2QOSCAurM0.js?scope=footer&delta=8&language=en&theme=claro&include=eJyNVNtyozAM_SE3PO0HbDvt087sJzDCCHBjW64sp5evrw0xCaTTyQtI5-iCbmjygh-SwDY9pwD2oFfkwRp_jEoTYyVBiznhTGzw3oCl8QCv8KE89Ste5I2hJmshxC0ISUiTCxZlSwh0FhljIB9z3m1KptAlEfIqgEwVLvIMlKDNu-lHlI1fFBCMyqFPbTIVPatqMFaQK7poSh-xN0L8pzG5N-zn7Es5lTmgCxNEE-8ynsTZZz8aj3eZGwfjlWUbbMq-bQB9PH9pG-g9N6pvu8-l2Itz6cNA7ED2TGdJH98S1aZfmMt8r7F4EyFAFHxhcv-HweibMJESa3zOmvGjMk6vQyjypcC9n85b81g-7q7uuCzAPsS8OT-3rB3yhjflsXeaiM1XxsH-m0ezZY3v8daH0dEJX35scAyo82E8TcD5cJCjWpjahUU7H48qV7cufpaVtsC0XhKcHnJRUQmR7YCb81tB73JhO_QgjPgLlUs95cXeUxg1BPxb3JT-7c9Qk0eUMtvYCsPnemHXoOrM2AYTsKnCN3votjQ:13
js_4SUWXrCtcujONBhXG1L3VbReHK42CoMog2QOSCAurM0.js?scope=footer&delta=8&language=en&theme=claro&include=eJyNVNtyozAM_SE3PO0HbDvt087sJzDCCHBjW64sp5evrw0xCaTTyQtI5-iCbmjygh-SwDY9pwD2oFfkwRp_jEoTYyVBiznhTGzw3oCl8QCv8KE89Ste5I2hJmshxC0ISUiTCxZlSwh0FhljIB9z3m1KptAlEfIqgEwVLvIMlKDNu-lHlI1fFBCMyqFPbTIVPatqMFaQK7poSh-xN0L8pzG5N-zn7Es5lTmgCxNEE-8ynsTZZz8aj3eZGwfjlWUbbMq-bQB9PH9pG-g9N6pvu8-l2Itz6cNA7ED2TGdJH98S1aZfmMt8r7F4EyFAFHxhcv-HweibMJESa3zOmvGjMk6vQyjypcC9n85b81g-7q7uuCzAPsS8OT-3rB3yhjflsXeaiM1XxsH-m0ezZY3v8daH0dEJX35scAyo82E8TcD5cJCjWpjahUU7H48qV7cufpaVtsC0XhKcHnJRUQmR7YCb81tB73JhO_QgjPgLlUs95cXeUxg1BPxb3JT-7c9Qk0eUMtvYCsPnemHXoOrM2AYTsKnCN3votjQ:13 Failed to load font - FontBackgroundColor
(anonymous) @ js_4SUWXrCtcujONBhXG1L3VbReHK42CoMog2QOSCAurM0.js?scope=footer&delta=8&language=en&theme=claro&include=eJyNVNtyozAM_SE3PO0HbDvt087sJzDCCHBjW64sp5evrw0xCaTTyQtI5-iCbmjygh-SwDY9pwD2oFfkwRp_jEoTYyVBiznhTGzw3oCl8QCv8KE89Ste5I2hJmshxC0ISUiTCxZlSwh0FhljIB9z3m1KptAlEfIqgEwVLvIMlKDNu-lHlI1fFBCMyqFPbTIVPatqMFaQK7poSh-xN0L8pzG5N-zn7Es5lTmgCxNEE-8ynsTZZz8aj3eZGwfjlWUbbMq-bQB9PH9pG-g9N6pvu8-l2Itz6cNA7ED2TGdJH98S1aZfmMt8r7F4EyFAFHxhcv-HweibMJESa3zOmvGjMk6vQyjypcC9n85b81g-7q7uuCzAPsS8OT-3rB3yhjflsXeaiM1XxsH-m0ezZY3v8daH0dEJX35scAyo82E8TcD5cJCjWpjahUU7H48qV7cufpaVtsC0XhKcHnJRUQmR7YCb81tB73JhO_QgjPgLlUs95cXeUxg1BPxb3JT-7c9Qk0eUMtvYCsPnemHXoOrM2AYTsKnCN3votjQ:13
js_4SUWXrCtcujONBhXG1L3VbReHK42CoMog2QOSCAurM0.js?scope=footer&delta=8&language=en&theme=claro&include=eJyNVNtyozAM_SE3PO0HbDvt087sJzDCCHBjW64sp5evrw0xCaTTyQtI5-iCbmjygh-SwDY9pwD2oFfkwRp_jEoTYyVBiznhTGzw3oCl8QCv8KE89Ste5I2hJmshxC0ISUiTCxZlSwh0FhljIB9z3m1KptAlEfIqgEwVLvIMlKDNu-lHlI1fFBCMyqFPbTIVPatqMFaQK7poSh-xN0L8pzG5N-zn7Es5lTmgCxNEE-8ynsTZZz8aj3eZGwfjlWUbbMq-bQB9PH9pG-g9N6pvu8-l2Itz6cNA7ED2TGdJH98S1aZfmMt8r7F4EyFAFHxhcv-HweibMJESa3zOmvGjMk6vQyjypcC9n85b81g-7q7uuCzAPsS8OT-3rB3yhjflsXeaiM1XxsH-m0ezZY3v8daH0dEJX35scAyo82E8TcD5cJCjWpjahUU7H48qV7cufpaVtsC0XhKcHnJRUQmR7YCb81tB73JhO_QgjPgLlUs95cXeUxg1BPxb3JT-7c9Qk0eUMtvYCsPnemHXoOrM2AYTsKnCN3votjQ:13 Debugging can be done with an unminified version of CKEditor by installing from the source file. Consult documentation at https://www.drupal.org/node/3258901 →
js_4SUWXrCtcujONBhXG1L3VbReHK42CoMog2QOSCAurM0.js?scope=footer&delta=8&language=en&theme=claro&include=eJyNVNtyozAM_SE3PO0HbDvt087sJzDCCHBjW64sp5evrw0xCaTTyQtI5-iCbmjygh-SwDY9pwD2oFfkwRp_jEoTYyVBiznhTGzw3oCl8QCv8KE89Ste5I2hJmshxC0ISUiTCxZlSwh0FhljIB9z3m1KptAlEfIqgEwVLvIMlKDNu-lHlI1fFBCMyqFPbTIVPatqMFaQK7poSh-xN0L8pzG5N-zn7Es5lTmgCxNEE-8ynsTZZz8aj3eZGwfjlWUbbMq-bQB9PH9pG-g9N6pvu8-l2Itz6cNA7ED2TGdJH98S1aZfmMt8r7F4EyFAFHxhcv-HweibMJESa3zOmvGjMk6vQyjypcC9n85b81g-7q7uuCzAPsS8OT-3rB3yhjflsXeaiM1XxsH-m0ezZY3v8daH0dEJX35scAyo82E8TcD5cJCjWpjahUU7H48qV7cufpaVtsC0XhKcHnJRUQmR7YCb81tB73JhO_QgjPgLlUs95cXeUxg1BPxb3JT-7c9Qk0eUMtvYCsPnemHXoOrM2AYTsKnCN3votjQ:13 CKEditorError: plugincollection-plugin-not-found {"plugin":null}
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#erro...
at js_88imFQLkcPPgS1VbOLxY8xeIOeGiNwBFJ1RnIy3WE4s.js?scope=footer&delta=6&language=en&theme=claro&include=eJyNVNtyozAM_SE3PO0HbDvt087sJzDCCHBjW64sp5evrw0xCaTTyQtI5-iCbmjygh-SwDY9pwD2oFfkwRp_jEoTYyVBiznhTGzw3oCl8QCv8KE89Ste5I2hJmshxC0ISUiTCxZlSwh0FhljIB9z3m1KptAlEfIqgEwVLvIMlKDNu-lHlI1fFBCMyqFPbTIVPatqMFaQK7poSh-xN0L8pzG5N-zn7Es5lTmgCxNEE-8ynsTZZz8aj3eZGwfjlWUbbMq-bQB9PH9pG-g9N6pvu8-l2Itz6cNA7ED2TGdJH98S1aZfmMt8r7F4EyFAFHxhcv-HweibMJESa3zOmvGjMk6vQyjypcC9n85b81g-7q7uuCzAPsS8OT-3rB3yhjflsXeaiM1XxsH-m0ezZY3v8daH0dEJX35scAyo82E8TcD5cJCjWpjahUU7H48qV7cufpaVtsC0XhKcHnJRUQmR7YCb81tB73JhO_QgjPgLlUs95cXeUxg1BPxb3JT-7c9Qk0eUMtvYCsPnemHXoOrM2AYTsKnCN3votjQ:17:125486
at js_88imFQLkcPPgS1VbOLxY8xeIOeGiNwBFJ1RnIy3WE4s.js?scope=footer&delta=6&language=en&theme=claro&include=eJyNVNtyozAM_SE3PO0HbDvt087sJzDCCHBjW64sp5evrw0xCaTTyQtI5-iCbmjygh-SwDY9pwD2oFfkwRp_jEoTYyVBiznhTGzw3oCl8QCv8KE89Ste5I2hJmshxC0ISUiTCxZlSwh0FhljIB9z3m1KptAlEfIqgEwVLvIMlKDNu-lHlI1fFBCMyqFPbTIVPatqMFaQK7poSh-xN0L8pzG5N-zn7Es5lTmgCxNEE-8ynsTZZz8aj3eZGwfjlWUbbMq-bQB9PH9pG-g9N6pvu8-l2Itz6cNA7ED2TGdJH98S1aZfmMt8r7F4EyFAFHxhcv-HweibMJESa3zOmvGjMk6vQyjypcC9n85b81g-7q7uuCzAPsS8OT-3rB3yhjflsXeaiM1XxsH-m0ezZY3v8daH0dEJX35scAyo82E8TcD5cJCjWpjahUU7H48qV7cufpaVtsC0XhKcHnJRUQmR7YCb81tB73JhO_QgjPgLlUs95cXeUxg1BPxb3JT-7c9Qk0eUMtvYCsPnemHXoOrM2AYTsKnCN3votjQ:17:125545
at Array.forEach ()
at u (js_88imFQLkcPPgS1VbOLxY8xeIOeGiNwBFJ1RnIy3WE4s.js?scope=footer&delta=6&language=en&theme=claro&include=eJyNVNtyozAM_SE3PO0HbDvt087sJzDCCHBjW64sp5evrw0xCaTTyQtI5-iCbmjygh-SwDY9pwD2oFfkwRp_jEoTYyVBiznhTGzw3oCl8QCv8KE89Ste5I2hJmshxC0ISUiTCxZlSwh0FhljIB9z3m1KptAlEfIqgEwVLvIMlKDNu-lHlI1fFBCMyqFPbTIVPatqMFaQK7poSh-xN0L8pzG5N-zn7Es5lTmgCxNEE-8ynsTZZz8aj3eZGwfjlWUbbMq-bQB9PH9pG-g9N6pvu8-l2Itz6cNA7ED2TGdJH98S1aZfmMt8r7F4EyFAFHxhcv-HweibMJESa3zOmvGjMk6vQyjypcC9n85b81g-7q7uuCzAPsS8OT-3rB3yhjflsXeaiM1XxsH-m0ezZY3v8daH0dEJX35scAyo82E8TcD5cJCjWpjahUU7H48qV7cufpaVtsC0XhKcHnJRUQmR7YCb81tB73JhO_QgjPgLlUs95cXeUxg1BPxb3JT-7c9Qk0eUMtvYCsPnemHXoOrM2AYTsKnCN3votjQ:17:125347)
at l.init (js_88imFQLkcPPgS1VbOLxY8xeIOeGiNwBFJ1RnIy3WE4s.js?scope=footer&delta=6&language=en&theme=claro&include=eJyNVNtyozAM_SE3PO0HbDvt087sJzDCCHBjW64sp5evrw0xCaTTyQtI5-iCbmjygh-SwDY9pwD2oFfkwRp_jEoTYyVBiznhTGzw3oCl8QCv8KE89Ste5I2hJmshxC0ISUiTCxZlSwh0FhljIB9z3m1KptAlEfIqgEwVLvIMlKDNu-lHlI1fFBCMyqFPbTIVPatqMFaQK7poSh-xN0L8pzG5N-zn7Es5lTmgCxNEE-8ynsTZZz8aj3eZGwfjlWUbbMq-bQB9PH9pG-g9N6pvu8-l2Itz6cNA7ED2TGdJH98S1aZfmMt8r7F4EyFAFHxhcv-HweibMJESa3zOmvGjMk6vQyjypcC9n85b81g-7q7uuCzAPsS8OT-3rB3yhjflsXeaiM1XxsH-m0ezZY3v8daH0dEJX35scAyo82E8TcD5cJCjWpjahUU7H48qV7cufpaVtsC0XhKcHnJRUQmR7YCb81tB73JhO_QgjPgLlUs95cXeUxg1BPxb3JT-7c9Qk0eUMtvYCsPnemHXoOrM2AYTsKnCN3votjQ:17:123835)
at V.initPlugins (js_88imFQLkcPPgS1VbOLxY8xeIOeGiNwBFJ1RnIy3WE4s.js?scope=footer&delta=6&language=en&theme=claro&include=eJyNVNtyozAM_SE3PO0HbDvt087sJzDCCHBjW64sp5evrw0xCaTTyQtI5-iCbmjygh-SwDY9pwD2oFfkwRp_jEoTYyVBiznhTGzw3oCl8QCv8KE89Ste5I2hJmshxC0ISUiTCxZlSwh0FhljIB9z3m1KptAlEfIqgEwVLvIMlKDNu-lHlI1fFBCMyqFPbTIVPatqMFaQK7poSh-xN0L8pzG5N-zn7Es5lTmgCxNEE-8ynsTZZz8aj3eZGwfjlWUbbMq-bQB9PH9pG-g9N6pvu8-l2Itz6cNA7ED2TGdJH98S1aZfmMt8r7F4EyFAFHxhcv-HweibMJESa3zOmvGjMk6vQyjypcC9n85b81g-7q7uuCzAPsS8OT-3rB3yhjflsXeaiM1XxsH-m0ezZY3v8daH0dEJX35scAyo82E8TcD5cJCjWpjahUU7H48qV7cufpaVtsC0XhKcHnJRUQmR7YCb81tB73JhO_QgjPgLlUs95cXeUxg1BPxb3JT-7c9Qk0eUMtvYCsPnemHXoOrM2AYTsKnCN3votjQ:17:133962)
at js_xiZCR6HpSCiGSd9cYUGlXc-iMe4qzRZChsW7mLEOSPU.js?scope=footer&delta=7&language=en&theme=claro&include=eJyNVNtyozAM_SE3PO0HbDvt087sJzDCCHBjW64sp5evrw0xCaTTyQtI5-iCbmjygh-SwDY9pwD2oFfkwRp_jEoTYyVBiznhTGzw3oCl8QCv8KE89Ste5I2hJmshxC0ISUiTCxZlSwh0FhljIB9z3m1KptAlEfIqgEwVLvIMlKDNu-lHlI1fFBCMyqFPbTIVPatqMFaQK7poSh-xN0L8pzG5N-zn7Es5lTmgCxNEE-8ynsTZZz8aj3eZGwfjlWUbbMq-bQB9PH9pG-g9N6pvu8-l2Itz6cNA7ED2TGdJH98S1aZfmMt8r7F4EyFAFHxhcv-HweibMJESa3zOmvGjMk6vQyjypcC9n85b81g-7q7uuCzAPsS8OT-3rB3yhjflsXeaiM1XxsH-m0ezZY3v8daH0dEJX35scAyo82E8TcD5cJCjWpjahUU7H48qV7cufpaVtsC0XhKcHnJRUQmR7YCb81tB73JhO_QgjPgLlUs95cXeUxg1BPxb3JT-7c9Qk0eUMtvYCsPnemHXoOrM2AYTsKnCN3votjQ:60:10883
at new Promise ()
at V.create (js_xiZCR6HpSCiGSd9cYUGlXc-iMe4qzRZChsW7mLEOSPU.js?scope=footer&delta=7&language=en&theme=claro&include=eJyNVNtyozAM_SE3PO0HbDvt087sJzDCCHBjW64sp5evrw0xCaTTyQtI5-iCbmjygh-SwDY9pwD2oFfkwRp_jEoTYyVBiznhTGzw3oCl8QCv8KE89Ste5I2hJmshxC0ISUiTCxZlSwh0FhljIB9z3m1KptAlEfIqgEwVLvIMlKDNu-lHlI1fFBCMyqFPbTIVPatqMFaQK7poSh-xN0L8pzG5N-zn7Es5lTmgCxNEE-8ynsTZZz8aj3eZGwfjlWUbbMq-bQB9PH9pG-g9N6pvu8-l2Itz6cNA7ED2TGdJH98S1aZfmMt8r7F4EyFAFHxhcv-HweibMJESa3zOmvGjMk6vQyjypcC9n85b81g-7q7uuCzAPsS8OT-3rB3yhjflsXeaiM1XxsH-m0ezZY3v8daH0dEJX35scAyo82E8TcD5cJCjWpjahUU7H48qV7cufpaVtsC0XhKcHnJRUQmR7YCb81tB73JhO_QgjPgLlUs95cXeUxg1BPxb3JT-7c9Qk0eUMtvYCsPnemHXoOrM2AYTsKnCN3votjQ:60:10840)
at Object.attach (js_4SUWXrCtcujONBhXG1L3VbReHK42CoMog2QOSCAurM0.js?scope=footer&delta=8&language=en&theme=claro&include=eJyNVNtyozAM_SE3PO0HbDvt087sJzDCCHBjW64sp5evrw0xCaTTyQtI5-iCbmjygh-SwDY9pwD2oFfkwRp_jEoTYyVBiznhTGzw3oCl8QCv8KE89Ste5I2hJmshxC0ISUiTCxZlSwh0FhljIB9z3m1KptAlEfIqgEwVLvIMlKDNu-lHlI1fFBCMyqFPbTIVPatqMFaQK7poSh-xN0L8pzG5N-zn7Es5lTmgCxNEE-8ynsTZZz8aj3eZGwfjlWUbbMq-bQB9PH9pG-g9N6pvu8-l2Itz6cNA7ED2TGdJH98S1aZfmMt8r7F4EyFAFHxhcv-HweibMJESa3zOmvGjMk6vQyjypcC9n85b81g-7q7uuCzAPsS8OT-3rB3yhjflsXeaiM1XxsH-m0ezZY3v8daH0dEJX35scAyo82E8TcD5cJCjWpjahUU7H48qV7cufpaVtsC0XhKcHnJRUQmR7YCb81tB73JhO_QgjPgLlUs95cXeUxg1BPxb3JT-7c9Qk0eUMtvYCsPnemHXoOrM2AYTsKnCN3votjQ:13:3962)
(anonymous) @ js_4SUWXrCtcujONBhXG1L3VbReHK42CoMog2QOSCAurM0.js?scope=footer&delta=8&language=en&theme=claro&include=eJyNVNtyozAM_SE3PO0HbDvt087sJzDCCHBjW64sp5evrw0xCaTTyQtI5-iCbmjygh-SwDY9pwD2oFfkwRp_jEoTYyVBiznhTGzw3oCl8QCv8KE89Ste5I2hJmshxC0ISUiTCxZlSwh0FhljIB9z3m1KptAlEfIqgEwVLvIMlKDNu-lHlI1fFBCMyqFPbTIVPatqMFaQK7poSh-xN0L8pzG5N-zn7Es5lTmgCxNEE-8ynsTZZz8aj3eZGwfjlWUbbMq-bQB9PH9pG-g9N6pvu8-l2Itz6cNA7ED2TGdJH98S1aZfmMt8r7F4EyFAFHxhcv-HweibMJESa3zOmvGjMk6vQyjypcC9n85b81g-7q7uuCzAPsS8OT-3rB3yhjflsXeaiM1XxsH-m0ezZY3v8daH0dEJX35scAyo82E8TcD5cJCjWpjahUU7H48qV7cufpaVtsC0XhKcHnJRUQmR7YCb81tB73JhO_QgjPgLlUs95cXeUxg1BPxb3JT-7c9Qk0eUMtvYCsPnemHXoOrM2AYTsKnCN3votjQ:13
edit:1 The keyword 'push-button' used on the 'appearance' property was deprecated and has now been removed. It will no longer have any effect.

@noonoos Thank you for providing more information.

Have you tried maybe creating a new text format with only the font plugin enabled and see if an error occurs then as well?

Ok. Tried that with same result
Only Font colour icon enabled
"Add Color" button didn't work
Text added using "basic format"
Changing to "test format" gave code and no icon

@noonoos

Unfortunately we still 'wasn't able to reproduce this issue. I have a few more steps for you to try:

1 Please apply this patch https://www.drupal.org/files/issues/2024-07-08/3459095-foreach-warning.p... → - this is something that was brought to us in other tickets and is also related to the
Warning: Undefined array key "type" in Drupal\\ckeditor5_plugin_pack_font\\Plugin\\CKEditor5Plugin\\FontColor->buildConfigurationForm() (line 83 of /var/www/html/web/modules/contrib/ckeditor5_plugin_pack/modules/ckeditor5_plugin_pack_font/src/Plugin/CKEditor5Plugin/FontColor.php)
part of your errors (on the text format config page)

2 Disable aggregation checkboxes at /admin/config/development/performance and clear cache - that will make error messages from the node edit page much clearer.

3 Retry adding a color and loading the editor and copy errors here again. Please do it using the code tag (it's in the toolbar of the editor here)

Haven't had time to add patch as yet however.
Disabled checkboxes "Aggregate CSS files" and "Aggregate JavaScript files" which resulted in total blank screen on all pages. I am using ddev so not sure if that was the reason as ddev uses a different settings.php
Recovered and re enabled checkboxes.
Went to advance settings and disabled "Enable advanced aggregation" checkbox
The text icons are now appearing in the editor and the 15 default colours are available
However in the configuration I am still unable to add colours.

I will add the patch later and see how we go.

After loading patches this is the error I get after trying to add colour

Uncaught 
Object { message: "\nAn AJAX HTTP error occurred.\nHTTP Result Code: 200\nDebugging information follows.\nPath: /admin/config/content/formats/manage/full_html?destination=/admin/config/content/formats&ajax_form=1\nStatusText: OK\nResponseText: Warning: Undefined array key "type" in Drupal\\ckeditor5_plugin_pack_font\\Plugin\\CKEditor5Plugin\\FontColor->buildConfigurationForm() (line 83 of /var/www/html/web/modules/contrib/ckeditor5_plugin_pack/modules/ckeditor5_plugin_pack_font/src/Plugin/CKEditor5Plugin/FontColor.php). =>  Sfdump = window.Sfdump || (function (doc) { doc.documentElement.classList.add('sf-js-enabled'); var rxEsc = /([.*+?^${}()|\\[\\]\\/\\\\])/g, idRx = /\\bsf-dump-\\d+-ref[012]\\w+\\b/, keyHint = 0 30: Drupal\\ckeditor5_plugin_pack_font\\Plugin\\CKEditor5Plugin\\FontColor->buildConfigurationForm()\" => array:2 [\n\"file\" => \"modules/contrib/ckeditor5_plugin_pack/modules/ckeditor5_plugin_pack_font/src/Plugin/CKEditor5Plugin/FontColor.php:83\"\n\"args\" => array:2 [\n0 => array:2 [\n\"use_default_colors\" =…", name: "AjaxError", stack: "@https://noosnoodles.ddev.site/sites/default/files/js/js_ux3dGnizJj0uABzTbw1z7NSK3cLyfnzZ7F1Eg566jvM.js?scope=footer&delta=3&language=en&theme=claro&include=eJx9kVFugzAMhi8E4akH2EmQCR716tiZY9C4faO2sFKpfUr0fc7vOIkqjn8-A3ejzRk4xJ20THIpTVTDTUJ0WvAmDjwqM-SCB-gwMI4G051SzTWp_Od3RlvDt1o61BcHx9rvgiO52un_BIyJ5F6724CloDgBvz9SI1fG95oSTMc7J4hnEmwFUhUMppsRWNo6UWlclQew7rE2t6j-hQY3xA8qnHVBe82qM0XI-PUY98PXbM0LupNMpXeDdX_IZ9gMNPWZMnbb5gp2S8Ff:12:2411\n@https://noosnoodles.ddev.site/sites/default/files/js/js_ux3dGnizJj0uABzTbw1z7NSK3cLyfnzZ7F1Eg566jvM.js?scope=footer&delta=3&language=en&theme=claro&include=eJx9kVFugzAMhi8E4akH2EmQCR716tiZY9C4faO2sFKpfUr0fc7vOIkqjn8-A3ejzRk4xJ20THIpTVTDTUJ0WvAmDjwqM-SCB-gwMI4G051SzTWp_Od3RlvDt1o61BcHx9rvgiO52un_BIyJ5F6724CloDgBvz9SI1fG95oSTMc7J4hnEmwFUhUMppsRWNo6UWlclQew7rE2t6j-hQY3xA8qnHVBe82qM0XI-PUY98PXbM0LupNMpXeDdX_IZ9gMNPWZMnbb5gp2S8Ff:12:19740\n" }

As mentioned in post #14 when the "Enable advanced aggregation" is disabled the icons work and no error
After enabling returns to icons not working and code only with the following error

Uncaught ReferenceError: CKEditor5 is not defined
    237 https://cdn.ckeditor.com/ckeditor5/41.3.1/dll/font/font.js:5
    o https://cdn.ckeditor.com/ckeditor5/41.3.1/dll/font/font.js:5
    782 https://cdn.ckeditor.com/ckeditor5/41.3.1/dll/font/font.js:5
    o https://cdn.ckeditor.com/ckeditor5/41.3.1/dll/font/font.js:5
    <anonymous> https://cdn.ckeditor.com/ckeditor5/41.3.1/dll/font/font.js:5
    <anonymous> https://cdn.ckeditor.com/ckeditor5/41.3.1/dll/font/font.js:5
    <anonymous> https://cdn.ckeditor.com/ckeditor5/41.3.1/dll/font/font.js:5
font.js:5:3612
    237 https://cdn.ckeditor.com/ckeditor5/41.3.1/dll/font/font.js:5
    o https://cdn.ckeditor.com/ckeditor5/41.3.1/dll/font/font.js:5
    782 https://cdn.ckeditor.com/ckeditor5/41.3.1/dll/font/font.js:5
    o https://cdn.ckeditor.com/ckeditor5/41.3.1/dll/font/font.js:5
    <anonymous> https://cdn.ckeditor.com/ckeditor5/41.3.1/dll/font/font.js:5
    <anonymous> https://cdn.ckeditor.com/ckeditor5/41.3.1/dll/font/font.js:5
    <anonymous> https://cdn.ckeditor.com/ckeditor5/41.3.1/dll/font/font.js:5
Failed to load font - FontColor js_n96pZlWR9vpUsJq0Y__4so_iHpf5yUvUYxNgm-FkS9o.js:13:1722
Failed to load font - FontBackgroundColor js_n96pZlWR9vpUsJq0Y__4so_iHpf5yUvUYxNgm-FkS9o.js:13:1722
Failed to load font - FontFamily js_n96pZlWR9vpUsJq0Y__4so_iHpf5yUvUYxNgm-FkS9o.js:13:1722
Failed to load font - FontSize js_n96pZlWR9vpUsJq0Y__4so_iHpf5yUvUYxNgm-FkS9o.js:13:1722
CKEditorError: plugincollection-plugin-not-found {"plugin":null}
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-plugincollection-plugin-not-found
    i https://noosnoodles.ddev.site/sites/default/files/js/js_ARpGa1FL5c6rnHgnt3RPvqKyl7F3gs3b3L423DBSZWA.js?scope=footer&delta=6&language=en&theme=claro&include=eJyNVEtu4zAMvZAar-YA06JdDTBHMGiZttVIokpR6ef0lezIiZ2iyCYh3xP_pDV5wQ9JYJueUwB70CvyYI0_RqWJsZKgxZxwJjZ4b8DSeIBX-FCe-hUv8uahJmshxC0ISUiTCxZlSwh0FhljIB9z3G1IptAlEfIqgEwVLvIMFKfNu-lHlI1dFBCMyqFPbTIVPatqMFaQK7poSh-xN0L8pzG5N-zn6Es5lTmgCxNEE-96PImzz340Hu96bhyMVy_bYFO2bQPo4znTNtB7blTfdp9LsRfj0oeB2IHsmc6SPr4lqk2_MJf5XmPxxkOAKPjC5P4Pg9E3biIl1vicNeNHZZxeh1DkS4E_l9YOeROb8rP3q_NWPZbk7-qeywLsXcybtQcnYvOV44H9N49myxrf420ujI5O-PJjg2NAnQ_jaQLOh4Mc1cLULiza-XhUubp18bOstAWm9ZLg9JCTjkqIbAfcnP8V9C43bIcehBF_oXKpp7zYewqjhoB_i5nSv30ZavCIUmYbW2H4XC_sGlSdGdtgAjZV-Aa1uLY0:17
js_n96pZlWR9vpUsJq0Y__4so_iHpf5yUvUYxNgm-FkS9o.js:13:5443
Error in parsing value for '-webkit-text-size-adjust'.  Declaration dropped. css_kVDBaMvkp50wnOohu-AKXxo1KOIBtcz8ghOCv1j6n1s.css:2:48
Error in parsing value for 'box-shadow'.  Declaration dropped. css_cYZGZaYof9jJFAe1gd8lw8rYc8ktPExlWyhApYr2jsM.css:4:9423
Ruleset ignored due to bad selector. css_cYZGZaYof9jJFAe1gd8lw8rYc8ktPExlWyhApYr2jsM.css:12:1117
Unknown property '-moz-tap-highlight-color'.  Declaration dropped. css_Y-7lTK_uA79o2OUvwQD9UWx9b650fiX2k4LGA06ZkM8.css:12:120
Unknown property 'tap-highlight-color'.  Declaration dropped. css_Y-7lTK_uA79o2OUvwQD9UWx9b650fiX2k4LGA06ZkM8.css:12:233
Unknown property '-moz-touch-callout'.  Declaration dropped. css_Y-7lTK_uA79o2OUvwQD9UWx9b650fiX2k4LGA06ZkM8.css:12:266
Unknown property 'touch-callout'.  Declaration dropped. css_Y-7lTK_uA79o2OUvwQD9UWx9b650fiX2k4LGA06ZkM8.css:12:334
Unknown property 'orphans'.  Declaration dropped. css_abyKm9qWn8l-y0R5K3NkcCD1YXlsEpSSOeh1PpsFdLg.css:5:329
Unknown property 'widows'.  Declaration dropped. css_abyKm9qWn8l-y0R5K3NkcCD1YXlsEpSSOeh1PpsFdLg.css:5:338
Unknown pseudo-class or pseudo-element 'has'.  Ruleset ignored due to bad selector. css_abyKm9qWn8l-y0R5K3NkcCD1YXlsEpSSOeh1PpsFdLg.css:10:399
Error in parsing value for '-webkit-appearance'.  Declaration dropped. css_5a8LnuAlOff63hKOc0l9l2frJJbEJWSa4wSasvKKwXw.css:8:3243
Error in parsing value for 'vertical-align'.  Declaration dropped. css_5a8LnuAlOff63hKOc0l9l2frJJbEJWSa4wSasvKKwXw.css:12:1049
Expected declaration but found '*'.  Skipped to next declaration. edit:1:9313
Expected declaration but found ':'.  Skipped to next declaration. edit:1:38752
Unknown pseudo-class or pseudo-element 'has'.  Ruleset ignored due to bad selector. edit:1:66178
Unknown pseudo-class or pseudo-element 'has'.  Ruleset ignored due to bad selector. edit:1:71738
Unknown pseudo-class or pseudo-element '-webkit-drag'.  Ruleset ignored due to bad selector. edit:1:88305
Unknown pseudo-class or pseudo-element '-webkit-drag'.  Ruleset ignored due to bad selector. edit:1:89657

Attaching updated patch. Please try it.

The reason of color form not being shown after clicking button is that there should be a form elements sent with ajax and warning message is sent instead. Not sure why this happens as for us it works without problems even with warnings being thrown.
The updated patch should resolve all possible warnings from displaying. So at least the message will change.

I am using ddev so not sure if that was the reason as ddev uses a different settings.php

To check if ddev may have some impact on this I suppose it would be best to set a completely fresh site, install only plugin pack and check if problem still occurs.

OK. This part of the patch solved the colour selection issue.

@@ -80,7 +80,7 @@ class FontColor extends CKEditor5PluginDefault implements CKEditor5PluginConfigu
           'font' => $this->t('Font Color'),
           'background' => $this->t('Background Color'),
         ],
-        '#default_value' => $option['type'],
+        '#default_value' => $option['type'] ?? [],
         '#ajax' => FALSE,
       ];
       $form['custom_colors_wrapper'][$colorId]['delete'] = [

Disabling Advagg solved the "no icon/code" issue. I will have to go through the settings and see if I can determine what setting is creating the issue.

DDEV is not the problem as my live site suffers the same issue when I install the Plugin.

OK. Enabling the following checkbox appears to be the cause of the "no icon/code" issue.
admin/config/development/performance/advagg/mod/Optimize JavaScript Ordering/Move all external scripts to the top of the execution order

That makes perfect sense in order to Uncaught ReferenceError: CKEditor5 is not defined error in console.

Main CKEditor5 script is loaded locally as it is shipped with Drupal core.
Plugin Pack scripts are on the other hand downloaded from CDN. https://www.drupal.org/project/ckeditor5_plugin_pack/issues/3459285 🐛 The module depends on external cdn for js plugins Active here is a discussion about that (and reson whay it's this way). So if Plugin that requires main CKEditor object is executed before that object is created then we'll have problem,

We'll be providing possibility to provide local path for plugin scripts soon, so there will be a possibility to use Plugin Pack with that option enabled.

@salmonek
I guess this is why the previous ckeditor5_font module was not giving me the problem as it has the js incorporated in the module

@salmonek, @dolszewski
Thank you for the time you have devoted to sorting out this issue. It is much appreciated and has been a great learning experience.

@noonoos
We have released 1.2.0 version of Plugin Pack which provides ability to set local path for plugin libraries.
The guide for the configuration is available at https://www.drupal.org/docs/extending-drupal/contributed-modules/contrib... →

Automatically closed - issue fixed for 2 weeks with no activity.