tiptap icon indicating copy to clipboard operation
tiptap copied to clipboard

[Bug]: Usage of ReactNodeViewRender drastically reduces performance for large Text

Open wasular opened this issue 1 year ago • 49 comments

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. 💖

wasular avatar Sep 30 '23 12:09 wasular