Help: Custom PNG emojis not rendering correctly inside of the textbox/textarea.

[psnwd]

Help Description: If you have tried any troubleshooting steps or researched the issue, share that information as well. It can help others in understanding what you've already attempted.

Emoji custom data

const custom = [
  {
    id: "anime",
    name: "Anime",
    emojis: [
      {
        id: "okita-cry",
        name: "Okita Cry",
        keywords: ["okita-cry"],
        skins: [{ src: "/emoji/images/1-okita-cry.png" }],
      },
      {
        id: "jamz",
        name: "jamz",
        keywords: ["jamz"],
        skins: [{ src: "/emoji/images/2-b-jamz.png" }],
      },
    ],
  },
];

export default custom;

page.jsx

function handleEmojiSelect(e) {
  try {
    if (e.unified != undefined) {
      const sym = e.unified?.split("_");
      const codeArray = [];
      sym.forEach((el) => codeArray.push("0x" + el));
      let emoji = String.fromCodePoint(...codeArray);
      setText(text + emoji);
      console.log(text);
    } else {
      const sym = e.shortcodes;
      setText(text + sym);
      console.log(sym);
    }
  } catch (err) {
    console.log(err);
  }
}

<input
  type="text"
  value={text}
  onChange={(e) => setText(e.target.value)}
  onKeyDown={handleOnEnter}
  placeholder="Send a message... (Slow mode is on)"
  className="input w-full rounded-lg !border-0 bg-[#32343a] text-white focus:outline-none focus:ring-0"
/>;

<Picker
  data={data}
  custom={custom}
  previewPosition="none"
  maxFrequentRows="1"
  onClickOutside={() => setshowEmoji(false)}
  onEmojiSelect={handleEmojiSelect}
/>

[vishalDhull0910]

@psnwd were you able to solve this issue ?

[psnwd]

@psnwd were you able to solve this issue ?

Not yet buddy, I hold that update in my website. So, do you have any suggestions?

[vishalDhull0910]

@psnwd same here, tried embedding as img element but got error

raised this issue here : https://github.com/missive/emoji-mart/issues/866

[psnwd]

I just moved to Twitch input structure.