我正在使用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-包中。
有三个软件包与此相关:
- 提供表情符号SVG数据:https://github.com/svgmoji/svgmoji
- 将其装入编辑器:https://github.com/remirror/remirror/blob/5a6ade6e35f5480eca1eac8b281e8a9342409a46/packages/remirror__extension-emoji/src/emoji-extension.ts
- 使用键绑定和控制弹出https://remirror.io/docs/api/react-hooks/与:https://remirror.io/docs/api/react-hooks/#function-useemoji
我尽我最大的努力来操作“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产生,这将被调用。
我还能去哪里找呢
1条答案
按热度按时间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