next.js Remirror emoji弹出,如何使用Unicode emoji而不是SVG?

w8ntj3qf  于 2023-06-22  发布在  其他
关注(0)|答案(1)|浏览(135)

我正在使用remirror和emojiExtension与nextJS。Remirror或Prosemirror被用作Gitlab和Slack中的编辑器,你按下“:”并键入一些字母,一些弹出窗口会出现与冒号后面的文本相匹配的表情符号,一些文本与表情符号相关。
这样做的问题是,它会对每个表情符号发出很多请求,以获取每个表情符号作为SVG:
https://cdn.jsdelivr.net/npm/...#{emoji-hexcode}
例如:https://cdn.jsdelivr.net/npm/@svgmoji/noto@3.2.0/sprites/all.svg#1F400
我的想法是在这里只使用unicode-emoji代码,这些代码也在svgmoji的emoji-data-包中。
有三个软件包与此相关:

我尽我最大的努力来操作“Moji”类,但我只能更改要提取表情符号的URL,而不是如何提取表情符号。
在钩子中有:

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]);

在那里,它获得了发出请求的URL,但我没有找到请求实际完成的点。
浏览器开发工具中请求的堆栈跟踪是:

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

正如浏览器告诉我的那样,这从setIndex(0)开始,但这可能是错误的,可能发生在take(moji.search(query), 20).map((emoji) => ({ ...emoji, url: moji.url(emoji) }))之后,因为有URL产生,这将被调用。
我还能去哪里找呢

vc6uscn9

vc6uscn91#

我解决了。发生这些请求是因为生成了一个“<img src=”http://cdn.jsdeliver/...”标签。这里发生了这样的事情:
https://github.com/remirror/remirror/blob/5a6ade6e35f5480eca1eac8b281e8a9342409a46/packages/remirror__react-components/src/popups/emoji-popup-component.tsx#L28
因此,解决方案只是自定义该组件,并将图像组件交换为仅呈现unicode char的某个span。实际上在react-remirror Package 器中有两个实现,可以产生这样的图像标签,toDOM-函数中的另一个没有被调用:https://github.com/remirror/remirror/blob/5a6ade6e35f5480eca1eac8b281e8a9342409a46/packages/remirror__extension-emoji/src/emoji-extension.ts

相关问题