mdx-editor / editor

A rich text editor React component for markdown
https://mdxeditor.dev
MIT License
2.03k stars 153 forks source link

[BUG] Link Popover position is incorrect after window resized #579

Open lkaihua opened 2 months ago

lkaihua commented 2 months ago

Describe the bug Link Popover position is incorrect after window resized

To Reproduce Steps to reproduce the behavior:

  1. Open https://mdxeditor.dev/editor/demo
  2. Click on the link [— Daring Fireball](https://daringfireball.net/projects/markdown/), the link popover is displayed right near the link as expected
  3. Click anywhere on the webpage to let editor lose focus. Make sure the editor loses focus, otherwise the bug can not be reproduced.
  4. Resize the window.
  5. See error: the link popover is on the top-left corner. It's expected to stay close to the link.

Expected behavior At the last step, the link popover is expected to stay close to the link.

Screenshots

Snipaste_2024-09-07_00-49-23

Desktop (please complete the following information):

Mobile:

Additional context LinkDialog.tsx fires publishWindowChange(true) when resizing happens, but link anchor is set to left:0; top:0 when editor loses focus.

lkaihua commented 2 months ago

To mitigate this issue, my solution is to use readOnly flag when necessary because here it uses readOnly to decide if a preview payload should be sent.

This issue is not ignorable as on Mobile and Tablet device the keyboard view will push up the viewport frequently.