JavaScript Error When Using "Custom" Option [#3419525]

Problem/Motivation

When trying to use our Font Awesome 6 Pro library, the icon picker in the toolbar shows a loading icon and then throws a JavaScript error in the console and never loads the list. The error is shown below:

Uncaught (in promise) CKEditorError: collection-add-item-invalid-index
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-collection-add-item-invalid-index
    i http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    addMany http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    add http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    _startTracking http://testsite-com.ddev.site/modules/contrib/ckeditor5_icons/js/build/icon.js?s8fyo5:1
    d http://testsite-com.ddev.site/modules/contrib/ckeditor5_icons/js/build/icon.js?s8fyo5:1
    fire http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    _populateGrid http://testsite-com.ddev.site/modules/contrib/ckeditor5_icons/js/build/icon.js?s8fyo5:1
    refresh http://testsite-com.ddev.site/modules/contrib/ckeditor5_icons/js/build/icon.js?s8fyo5:1
    d http://testsite-com.ddev.site/modules/contrib/ckeditor5_icons/js/build/icon.js?s8fyo5:1
    fire http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    d http://testsite-com.ddev.site/modules/contrib/ckeditor5_icons/js/build/icon.js?s8fyo5:1
    _createIconPickerView http://testsite-com.ddev.site/modules/contrib/ckeditor5_icons/js/build/icon.js?s8fyo5:1
    init http://testsite-com.ddev.site/modules/contrib/ckeditor5_icons/js/build/icon.js?s8fyo5:1
    r http://testsite-com.ddev.site/modules/contrib/ckeditor5_icons/js/build/icon.js?s8fyo5:1
    promise callback*a http://testsite-com.ddev.site/modules/contrib/ckeditor5_icons/js/build/icon.js?s8fyo5:1
    s http://testsite-com.ddev.site/modules/contrib/ckeditor5_icons/js/build/icon.js?s8fyo5:1
    s http://testsite-com.ddev.site/modules/contrib/ckeditor5_icons/js/build/icon.js?s8fyo5:1
    init http://testsite-com.ddev.site/modules/contrib/ckeditor5_icons/js/build/icon.js?s8fyo5:1
    fire http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    set http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    render http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    fire http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    R http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    fire http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    click http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    s http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    fire http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    t http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    attach http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    _addEventListener http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    listenTo http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    listenTo http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    listenTo http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    listenTo http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    activateDomEventListener http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    o http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    _setUpListeners http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    _renderElement http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    _renderNode http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    render http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    render http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    render http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    render http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    decorate http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    fire http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    e http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    _renderElementChildren http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    _renderElement http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    _renderNode http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    render http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    render http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    render http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    decorate http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    fire http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    e http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    _renderViewIntoCollectionParent http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5
    l http://testsite-com.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=40.2.0:5

Steps to reproduce

Enable and configure the main Font Awesome module with Font Awesome Pro, providing the library locally (/libraries/fontawesome)
Enable this module, edit your main text format and add the "Icons" button to the toolbar.
In the configuration for "Icons" switch from "Font Awesome Free" to "Custom".
Create or edit a page and in a section using the editor you have configured, click on the Icons button to insert an icon.

Comment	File	Size	Author
#20	ckeditor5_icons-3419525-2.patch	88.09 KB	timurtripp
#7	ckeditor5_icons-3419525.patch	87.62 KB	timurtripp
#4	javascript-error-when-using-custom_3419525_4.patch	88.28 KB	agbockus

Issue fork ckeditor5_icons-3419525

Show commands

Start within a Git clone of the project using the version control instructions.

Add & fetch this issue fork’s repository

Or, if you do not have SSH keys set up on git.drupalcode.org:

Add & fetch this issue fork’s repository

3419525-javascript-error-when changes, plain diff MR !4
Check out this branch for the first time

Check out existing branch, if you already have it locally

About issue forks

Comments

Comment #1

6 February 2024 at 16:04

agbockus created an issue. See original summary.

Comment #2

ari.saves commented 7 February 2024 at 05:17

+1 I'm also having this issue; same behavior, though I get a console error too:

2icon.js?s8gzke:1 Uncaught (in promise) TypeError: e.trim is not a function
    at icon.js?s8gzke:1:2741
    at Array.map (<anonymous>)
    at a (icon.js?s8gzke:1:2731)
    at icon.js?s8gzke:1:3604
    at Generator.next (<anonymous>)
    at r (icon.js?s8gzke:1:2138)

Comment #3

agbockus commented 7 February 2024 at 22:33

Oh, interesting - after updating from Font Awesome Pro 6.4.2 to 6.5.1, the previous error goes away - but I now get the "trim is not a function" error from the comment above!

Comment #4

agbockus commented 8 February 2024 at 00:32

Status	File	Size
new	javascript-error-when-using-custom_3419525_4.patch	88.28 KB

Alright, was able to take a look at this and found the spots that were throwing errors. It seems like it ended up passing -1 as the index, when CKEditor will assign one for us if it doesn't have an index. That, and not calling trim on an empty or void seemed to fix my issues and got it working for me.

Comment #5

timurtripp commented 8 February 2024 at 18:26

Adding it with no index works but that unfortunately breaks the focus tracker item order. The index is there to ensure the focusable the elements are in the correct order when using keyboard-based navigation.

Comment #6

timurtripp commented 8 February 2024 at 18:31

Status:

Active

» Needs work

Comment #7

timurtripp commented 8 February 2024 at 19:18

Status	File	Size
new	ckeditor5_icons-3419525.patch	87.62 KB

Here's a patch to fix the error in the OP. The error is triggered whenever the "Expand" button is visible on the initial opening of the icon picker (Font Awesome Free has fewer icons and wasn't triggering this), so good catch on that one.

"e.trim is not a function" is unrelated and shouldn't happen unless your Font Awesome metadata is somehow corrupted, or maybe there's a bug in your specific version of the metadata. I don't have access to your custom Font Awesome Pro metadata so more information would be helpful, such as the value of `e` (the specific search term that's not a string), and which icon it's breaking on. Because this is an open-source project, you can use `npm run watch` to get a more verbose copy of the script for setting breakpoints / other debugging purposes.

Comment #8

timurtripp commented 8 February 2024 at 19:27

Status:

Needs work

» Needs review

Comment #9

8 February 2024 at 19:40

timurtripp opened merge request !4

Comment #10

timurtripp commented 8 February 2024 at 19:44

Priority:

Normal

» Major

Comment #11

agbockus commented 8 February 2024 at 19:54

1 file was hidden/shown/deleted

Status	File	Size
hidden	javascript-error-when-using-custom_3419525_4.patch	88.28 KB

I had updated the Font Awesome library with a fresh download, so the metadata was straight from them - but maybe it was just a secondary issue from the main index issue.

Yeah, originally I had logged the index variable and it printed twice as 1 and then once as -1, which CKEditor didn't seem to like. After looking at CKEditor documentation, it says that not providing an index would add it to the collection (and assumedly create an index value). Just to get something working, it made sense to let them handle the index versus providing a value that threw an error.

The patch in #7 changes the logged index value in _startTracking() from 1, 1, -1 to 1, 2, undefined, but CKEditor doesn't throw an error and continues working!

So overall, the patch provided in #7 seems to solve the issue - the icon picker now displays and inserts icons! Thanks for the patch!

Comment #12

timurtripp commented 9 February 2024 at 00:01

undefined is okay in some situations, the index parameter is optional and predictably it'll just append to the end if not specified. I'll go ahead and merge this in, thanks!

Comment #13

9 February 2024 at 00:03

timurtripp committed 951d2cf9 on 1.x

Issue #3419525: JavaScript Error When Using "Custom" Option

Comment #14

timurtripp commented 9 February 2024 at 00:04

Status:

Needs review

» Fixed

Comment #15

agbockus commented 9 February 2024 at 19:40

Version:	1.0.0-rc2	» 1.0.0-rc3
Status:	Fixed	» Needs work

Alright, after some more testing and putting this on another site, I've started encountering the "e.trim() is not a function" error again.

After logging the value of term on line 89 in iconutils.ts, it prints them all up to 0 - which prints as a number, not a string. I believe this is why we're getting the "e.trim() is not a function" error.

Should that line be modified to only trim strings?

(iconDefinition as IconDefinition).search = { terms: (iconDefinition as IconDefinitionAlt).search_terms.map(term => typeof term === 'string' ? term.trim() : term) };

Alternatively, it might be being imported as a number instead of a string - but this is still with a brand new download of FA6 Pro from Font Awesome, so it might just be how they populate some of the Pro icons vs Free?

Comment #16

timurtripp commented 9 February 2024 at 19:48

They may have introduced a bug into their metadata YAML file, but it's something we can account for. Do you have the section of their YAML file that's breaking it?

Comment #17

timurtripp commented 9 February 2024 at 19:50

Something like a - 0 instead of - '0' I assume.

Comment #18

agbockus commented 9 February 2024 at 19:58

Oh, looks like that may be the exact issue!

There are a few instances - in their icons.yml they have it under plus and plus-large:

plus:
  aliases:
    names:
      - add
    unicodes:
      composite:
        - '2795'
        - f067
      primary:
        - f067
      secondary:
        - 102b
        - 10f067
  changes:
    - 1.0.0
    - 5.0.0
    - 5.0.13
    - 6.0.0-beta1
    - 6.2.0
    - 6.3.0
    - 6.4.0
    - 6.5.0
  label: Plus
  search:
    terms:
      - 0

plus-large:
  changes:
    - 6.1.1
    - 6.2.0
    - 6.3.0
    - 6.4.0
    - 6.5.0
  label: Plus Large
  search:
    terms:
      - 0

There are similar lines in the icon-families.yml for the same icons too!

Comment #19

timurtripp commented 9 February 2024 at 20:15

Yep that'll do it. The Font Awesome module has no check to ensure these are all strings, and doesn't trim them either (which likely breaks some terms for the module's own autocomplete widget, I've seen a bunch that needed trimming which is why I added that). Since this module is pulling the metadata directly from the Font Awesome module when "Custom" gets selected, the issue gets passed down the pipeline.

Comment #20

timurtripp commented 9 February 2024 at 23:24

Status	File	Size
new	ckeditor5_icons-3419525-2.patch	88.09 KB

1 file was hidden/shown/deleted

Status	File	Size
hidden	ckeditor5_icons-3419525.patch	87.62 KB

New patch to make TypeScript expect either a string or number instead of string only, let me know if this works.

Comment #21

timurtripp commented 9 February 2024 at 23:35

Status:

Needs work

» Needs review

Comment #22

ari.saves commented 12 February 2024 at 16:49

The patch in #20 resolves the e.trim error for me! Thanks so much :)

I'm still having some issues getting custom icons to show in the plugin window. Wondering if my metadata is corrupted.

Here's some metadata for a custom icon:

learn:
  label: learn
  styles:
    - custom
  unicode: e000
  voted: false

vs the metadata for a FA icon:

key:
  aliases:
    unicodes:
      composite:
        - 1f511
      secondary:
        - 10f084
  changes:
    - 1.0.0
    - 5.0.0
    - 5.10.1
    - 6.0.0-beta1
    - 6.0.0
    - 6.2.0
    - 6.3.0
    - 6.4.0
    - 6.5.0
  label: Key
  search:
    terms:
      - key
      - lock
      - password
      - private
      - secret
      - unlock
  styles:
    - solid
  unicode: f084
  voted: false

So a lot more attributes there for the FA icon vs our custom kit icons; wondering which of these attributes may be required and if that's the issue.

Comment #23

timurtripp commented 12 February 2024 at 17:00

@ari.saves Thanks! I'd like to close this issue about the JavaScript error, feel free to open a separate one for the custom icons not showing up in the picker and I'll credit you once a fix is available for that.

Comment #24

12 February 2024 at 17:41

timurtripp committed 7580d396 on 1.x

Issue #3419525: Fixes `e.trim` error caused by a bug Font Awesome...

Comment #25

timurtripp commented 12 February 2024 at 17:42

Status:

Needs review

» Fixed

Comment #26

26 February 2024 at 17:44

Status:

Fixed

» Closed (fixed)

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

JavaScript Error When Using "Custom" Option

Problem/Motivation

Steps to reproduce

Issue fork ckeditor5_icons-3419525

Comments

Comment #1

Comment #2

Comment #3

Comment #4

Comment #5

Comment #6

Comment #7

Comment #8

Comment #9

Comment #10

Comment #11

Comment #12

Comment #13

Comment #14

Comment #15

Comment #16

Comment #17

Comment #18

Comment #19

Comment #20

Comment #21

Comment #22

Comment #23

Comment #24

Comment #25

Comment #26

News items

Our community

Documentation

Drupal code base

Governance of community