JavaScript Error When Using "Custom" Option

+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)

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!

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.

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.

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.

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!

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!

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?

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?

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

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!

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.

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

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.

@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.

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