Remirror emoji popup, how to use unicode emojis instead of SVG?

Im using remirror and the EmojiExtension with nextJS. Remirror or Prosemirror is used as the editor in Gitlab and Slack, you press the ":" and type some letters and some popup appears with emojis matching the text behind the colon with some text assiciated with the emoji.

The problem with this is, it makes a lot of requests for each single emoji to get each emoji as an SVG to:

https://cdn.jsdelivr.net/npm/...#{emoji-hexcode}

like this: https://cdn.jsdelivr.net/npm/@svgmoji/[email protected]/sprites/all.svg#1F400

My idea is here to just use the unicode-emoji codes, that are also in the emoji-data-package of svgmoji.

There are three packages connected to this:

Provide emoji SVG-Data: https://github.com/svgmoji/svgmoji
Mount this into the editor: https://github.com/remirror/remirror/blob/5a6ade6e35f5480eca1eac8b281e8a9342409a46/packages/remirror__extension-emoji/src/emoji-extension.ts
use key bindings and control the popup https://remirror.io/docs/api/react-hooks/ with: https://remirror.io/docs/api/react-hooks/#function-useemoji

I tried my best to manipulate the "Moji" class, but I only could change the URL to be fetched the emoji from and not how the fetch is done.

In the hook there is:

const onChange = useCallback2((props2) => {
    const { change, exit, query, moji, apply, range } = props2;
    if (change) {
      setIndex(0);
      setState({
        list: take(moji.search(query), 20).map((emoji) => ({ ...emoji, url: moji.url(emoji) })),
        apply: (code) => {
          setState(null);
          return apply(code);
        },
        range,
        query,
        exit
      });
    }
    if (exit) {
      setState(null);
    }
  }, [setIndex]);

There it gets the url to make the request from, but I don't find the point, where the request is actually done.

The stacktrace for the request in the browser developer tools is:

commitMountreact-dom.development.js:11038
commitLayoutEffectOnFiber
react-dom.development.js:23407
commitLayoutMountEffects_complete
react-dom.development.js:24688
commitLayoutEffects_begin
react-dom.development.js:24674
commitLayoutEffects
react-dom.development.js:24612
commitRootImpl
react-dom.development.js:26823
commitRoot
react-dom.development.js:26682
performSyncWorkOnRoot
react-dom.development.js:26117
flushSyncCallbacks
react-dom.development.js:12042
ensureRootIsScheduled/<
react-dom.development.js:25651
(Async: VoidFunction) ensureRootIsScheduled
react-dom.development.js:25643
scheduleUpdateOnFiber
react-dom.development.js:25531
dispatchSetState
react-dom.development.js:17527
useEmoji/onChange<
remirror-react-hooks.js:268

This starts from the setIndex(0) as the browsers tells me, but this might be wrong and maybe happens after take(moji.search(query), 20).map((emoji) => ({ ...emoji, url: moji.url(emoji) })) cause there are the URLs produced, that are going to be called.

Where could I look else?

Solution

I resolved it. These requests happen because there is an "<img src="http://cdn.jsdeliver/..." tag generated. And this happens here:

https://github.com/remirror/remirror/blob/5a6ade6e35f5480eca1eac8b281e8a9342409a46/packages/remirror__react-components/src/popups/emoji-popup-component.tsx#L28

So the solution was simply to customize that component and exchange the image component to some span that just renders the unicode char. Actually there are two implementations in the react-remirror wrapper, that can produce such an image tag, there other one in the toDOM-function is not called: https://github.com/remirror/remirror/blob/5a6ade6e35f5480eca1eac8b281e8a9342409a46/packages/remirror__extension-emoji/src/emoji-extension.ts