search

ueberdosis / tiptap

The headless rich text editor framework for web artisans.
https://tiptap.dev
MIT License
27.37k stars 2.27k forks source link

[Suggestion Utility] Tippy.js: Potential memory leak with the mentions extension #2547

Open rfgamaral opened 2 years ago

rfgamaral commented 2 years ago

What’s the bug you are facing?

When an editor with the Mentions extension is unmounted while having the mention suggestion popup active and selected, this message appears in the console log:

image

This may not seem like a big problem, and it's not with a normal setup of the Tiptap editor, but we are doing something different where this becomes a real issue: the whole app crashes.

How can we reproduce the bug on our side?

Basic CodeSandbox (https://codesandbox.io/s/tiptap-issue-2547-basic-dnlg89)

Reproduction steps:

  1. Expand the CodeSandbox console (if it's not already)
  2. Type @ into the editor
  3. Select everything with Ctrl+A (or macOS equivalent)
  4. Click the UNMOUNT button
  5. Observe the "potential memory leak" in the console

Advanced CodeSandbox (https://codesandbox.io/s/tiptap-issue-2547-advanced-zi6t1y)

This advanced example mimics the behavior of our app. We have a small editor on the bottom of the page with an expand button. Clicking this button will open an expanded/bigger version of the same editor in a modal (taking most of the screen). The expanded editor in the modal has a collapse button to close the modal, and get back to the smaller editor. But that's not all, we also want to keep the selection state between the toggled states, so if you select a word/sentence/everything in the editor, and switch to an expanded/collapsed state, the selection should be restored (this is working, try it).

Toggling the expanded/collapsed state in this editor is similar to the basic sandbox in the sense that one of the editors is unmounted, and with the "restore selection" functionality we have, the application crashes if a mention suggestion Tippy.js popup is active.

Reproduction steps:

  1. Type @ into the editor
  2. Select everything with Ctrl+A (or macOS equivalent)
  3. Click the EXPAND button
  4. Observe the error on the screen

What did you expect to happen?

There should be no "memory leak" nor application crashes when an editor component is unmounted with a selection active surrounding the trigger character for the mentions extension.

Did you update your dependencies?

Are you sponsoring us?

stale[bot] commented 2 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

github-actions[bot] commented 1 year ago

This issue is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 7 days