tiptap
tiptap copied to clipboard
[Bug]: Usage of ReactNodeViewRender drastically reduces performance for large Text
Which packages did you experience the bug in?
core
What Tiptap version are you using?
2.1.6
What’s the bug you are facing?
If I use this simple React Component as Wrapper for a Custom Paragraph the performance drastically reduces for large text. Luckily in my use case I don't need to use React Render for the Paragraph but there seems to be some performance bug which could be critical for other users.
import { NodeViewWrapper, NodeViewContent } from '@tiptap/react';
import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
import styles from './DraggableNodeView.module.scss';
import React from 'react';
const DraggableNodeView = ({ contentComponent: ContentComponent, ...props }) => {
return (
<NodeViewWrapper className={styles.node__wrapper}>
<DragIndicatorIcon draggable="true" data-drag-handle className={styles.drag__icon} />
{ContentComponent ? (
<ContentComponent {...props} />
) : (
<NodeViewContent className={styles.node__content} />
)}
</NodeViewWrapper>
);
};
export default DraggableNodeView;
I now switched to vanilla html and js for this and it works
import { Paragraph } from '@tiptap/extension-paragraph';
const CustomParagraph = Paragraph.extend({
draggable: true,
addNodeView() {
return () => {
const dom = document.createElement('div');
dom.className = 'node__wrapper';
const dragIcon = document.createElement('div');
dragIcon.draggable = true;
dragIcon.setAttribute('data-drag-handle', '');
dragIcon.className = 'drag__icon';
dragIcon.innerHTML =
'svg';
dom.appendChild(dragIcon);
const content = document.createElement('div');
content.className = 'node__content';
dom.appendChild(content);
return {
dom: dom,
contentDOM: content,
};
};
},
});
export default CustomParagraph;
What browser are you using?
Chrome
Code example
No response
What did you expect to happen?
Using a simple React render should not have this big of influence on the performance.
Anything to add? (optional)
No response
Did you update your dependencies?
- [X] Yes, I’ve updated my dependencies to use the latest version of all packages.
Are you sponsoring us?
- [ ] Yes, I’m a sponsor. 💖