Hi! I’m working on an update for my MagicBB extension and ran into this warning in the console:
Don't reuse attrs object, use new object for every redraw, this will throw in next major
requestAnimationFrame
@ Composer.js:94
It shows up every time I click one of my composer toolbar buttons.
Originally everything worked fine and the warning never appeared. It started only after I added custom popups — color palette / alert picker — positioned above the buttons using a simple Portal — rendering into document.body via m.render. Everything still works, but I’d like to fix the warning properly.
How I add a button:
extend(TextEditor.prototype, 'toolbarItems', function (items) {
const getEl = () => this.attrs?.composer?.editor?.el;
const getEditor = () => this.attrs?.composer?.editor;
items.add('bb-color', MagicBBColorPicker.component({ getEl, getEditor }), 98);
});
Portal I use for popover:
class Portal extends Component {
oninit() {
this.host = document.createElement('div');
}
// Create a fresh vnode tree on every render to avoid attrs reuse
_cloneChildren(children) {
if (Array.isArray(children)) return [...children];
return children ?? null;
}
oncreate(vnode) {
document.body.appendChild(this.host);
m.render(this.host, m('div', this._cloneChildren(vnode.children)));
}
onupdate(vnode) {
m.render(this.host, m('div', this._cloneChildren(vnode.children)));
}
onremove() {
m.render(this.host, null);
this.host.remove();
}
view() { return null; }
}
Question
What’s the proper way to add custom toolbar buttons with popups (via Portal or otherwise) in Flarum 2.x, without triggering the «Don’t reuse attrs object» warning?
