[Feature Request]: make feather-icons WYSIWYG

[warpdesign]

Feature Description

Adding a new feather-icon in (eg. [fi=github])WYSIWYG editor shows the shortcode, not what you see.

Editor:

What you get:

There should be an easy way to add a feather icon, and the icon should be visible in the WYSIWYG editor.

[bobmitro]

While I think your idea is great, I regret to inform you that our plugin API does not currently support this kind of implementation. However, we are continually working to improve our API's capabilities, and we will consider integrating this feature as soon as possible. Please stay tuned for future updates.

[HowToMeetLadies]

Hello, I just have a little suggestion so I think it's okay if I post it here.

The description says the following:

Please make sure to include the elements in this exact sequence: icon name, size, color (in HEX format), class, aria-hidden, and stroke-width. The color should be specified using HEX format. This format is necessary for the plugin to correctly interpret and display the icons as intended.

I suggest taking the parameter evaluation out of the regex and moving it into the function.

return c.replace(/\[fi=([^ ]+)((?: [a-z-]+=[^=\]]+)*)\]/gi, (match, iconName, attr) => {
      const opts = (attr || "")
        .trim().replace(/\s+/g, ' ')  // tidy
        .split(' ')                   // ["key=value"]
        .map(kv => kv.split('='))     // [[key, value]]
        .filter(                      // only valid
          arr => ["size", "color", "class", "aria-hidden", "stroke-width"].includes(arr[0]))
        .reduce(                      // { key: value }
          (dict, arr) => { dict[arr[0]] = arr[1]; return dict },
          { "size": "24px", "color": "currentColor", "class": "", "aria-hidden": "false", "stroke-width": "2" });
});

(It's an excerpt from my session today. However, it shows the evaluation of the shortcode parameters, in any order.)

---

A manual tinymce integration (config override) might follow, but I'm not promising it.

[HowToMeetLadies]

I wrote it as PoC, but it works so far: fifi live shortcodes (hack).

WYSIWYG:

Source: