Redactor Plugin not showing any icons in modal window

[icreatestuff]

Describe the bug

I have an SVG folder of icons setup as an Icon Set, an Icon Picker field and a redactor config that uses the icon-picker plugin.

The Redactor button is visible in the Redactor field and clicking it opens a modal window however no SVG icons appear once the loading icon disappears.

To debug I added the Icon Picker field to the entry type and can see that it correctly shows the list of SVG icons from the specified folder so I think that rules out the Icon picker config being wrong, as well as the Icon Set and field settings.

I have tried disabling all other Redactor plugins in the redactor config to rule out any conflicts that might be occurring there too.

Thanks

Steps to reproduce

1. Install latest version of Icon Picker plugin on Craft 4.3.4
2. Create Icon Picker field
3. Update Icon Picker settings to relevant Icons URL and Path (in my case using the @web and @webroot aliases)
4. Select the new Icon picker field in the Redactor field setting.
5. Create a Redactor config with the 'icon-picker' plugin added.
6. Create a redactor field that uses the redactor config.

Craft CMS version

Pro 4.3.4

Plugin version

2.0.8

Multi-site?

No

Additional context

No response

[engram-design]

Should be fixed in 2.0.10

[icreatestuff]

Thanks for jumping on this so quickly but unfortunately I'm seeing the same problem with the redactor modal in 2.0.10

I regenerated the cache just in case.

Inspecting the modal contents seems to reveal that a component isn't getting properly initialized or loaded.

Let me know if there's anything else I can provide to help debug.

[engram-design]

Hmmm, so you should see this icon-picker.js script lazy-loaded when you click the Icon Picker button, and the modal appears.

I take it that's not the case on your end? (note the other two icon-picker.js files is the Redactor plugin, which you can identify as it starts with $R.add('plugin', 'icon-picker', { ...)

[icreatestuff]

This is what I see.

The first 3 scripts are loaded on page load. The 4th as you point out is loaded when the Icon Picker button is clicked.

The other 2 icon-picker.js files do indeed show the Redactor plugin - is it an issue that their contents are identical?

[engram-design]

That all sounds correct then (and yes the first two being identical are fine). So the last-loaded script should also include an event listener to when its loaded to initialize the Vue-based field. For some reason, it sounds like that last step isn't happening...

Quick question, are there any Icon Picker fields on the page, outside of Redactor?

[icreatestuff]

I did previously have the Icon Picker field on the same page to compare and test my settings and config were correct. The standalone field works great.

I since removed that field from the entry type thinking that perhaps there could have been a conflict, but the Redactor field still isn't working.

[engram-design]

Gotcha, just thinking if you add the Icon Picker field back, does that make a difference? It almost certainly seems like a race condition, just trying to isolate it, as it's all working well for me on my end...

[icreatestuff]

Unfortunately, that doesn't make any difference. With or without the icon field the redactor modal remains empty.

[svale]

I see this is issue is a bit old, but I'm seeing the same problem in our setup. Stand alone icon picker fields works nicely, but the redactor modal comes up empty.

It looks like the icon-picker.js script is lazy loaded ok, but the field input HTML is pretty empty.

 <icon-picker-input value='{
    "value":null,
    "iconSet":null,    // <-- should this be null ?
    "type":null,
    "label":null,
    "keywords":null,
    "displayValue":"",
    "id":1181313724}' name="testIcon">
 </icon-picker-input>

It's tested with and without other icon-picker fields on the same entry

Thanks!

---

Craft CMS version Pro 4.3.6.2

Plugin version 2.0.12

Multi-site? No

[engram-design]

Aha, looks like some time away from this issue has helped make this bug obvious! Should be fixed for the next release. To get this early, change your verbb/icon-picker requirement in composer.json to:

"require": {
  "verbb/icon-picker": "dev-craft-4 as 2.0.12",
  "...": "..."
}

Then run composer update.

[svale]

Nice, the fix works perfectly!

Unfortunately, now that the redactor plugin works, it seems the markup injected into the redactor-field is rather unstable/vulnerable. But I'll leave that for another possible issue... 😅

Thanks!

[engram-design]

Glad it's working, what did you mean by unstable/vulnerable? I know it's not the most amazing experience for the actual icon once picked and inserted - if that's what you mean?

[svale]

Yes, sorry. No snarkyness intended!

The icon inserts fine, but the markup beneath is difficult to control and would easily break in combination with headings, linebreaks etc. Icons quickly "exploded" in size and where (understandably) difficult to select or move.

<h2>
  <br></h2>
  <h2>Grønt&nbsp; nabolag&nbsp;    <!---->
    <svg viewBox="0 0 1000 1000">
      <use xlink:href="#star_4"></use>
    </svg>    <!---->    <!----></h2>
  <span class="icon-picker-redactor-icon">    <!---->
    <svg viewBox="0 0 1000 1000">
      <use xlink:href="#star_2"></use>
    </svg>    <!---->    <!----></span>
  <span class="icon-picker-redactor-icon">    <!---->
    <svg viewBox="0 0 1000 1000">
      <use xlink:href="#star_4"></use>
    </svg>    <!---->    <!----></span>Frosta ligger frodig og grønn omtrent halvveis inne i Trondheimsfjorden. De mange gårdene på halvøya dyrker store mengder grønnsaker og urter. Beliggenheten og god matjord, gjør Frosta til en av de viktigste landbruksområdene i Norge.<p>
  <span class="icon-picker-redactor-icon">    <!---->
    <svg viewBox="0 0 1000 1000">
      <use xlink:href="#star_1"></use>
    </svg>    <!---->    <!----></span>
</p>
<p>Men for noen år tilbake satt Ragnhild Eggen Viken på familiegården på Frosta og irriterte seg over hvor mye mat som <em>ikke</em> ble spist.</p>
<p>
  <span class="icon-picker-redactor-icon">    <!---->
    <svg viewBox="0 0 1000 1000">
      <use xlink:href="#star_2"></use>
    </svg>    <!---->    <!----></span>
</p>

In our use case (small inline icons), it seems safer to use til clips plugin and unicode chars instead

[engram-design]

Gotcha, and yes I totally agree. I haven't figured out a nice way to have it work inline in a nice fashion, giving it block-level (or non-block-level) configurations, etc. Room for improvement for sure, just need to brush up on the Redactor API.

[engram-design]

Fixed in 2.0.13