search

steven-tey / novel

Notion-style WYSIWYG editor with AI-powered autocompletion.
https://novel.sh
Apache License 2.0
11.8k stars 980 forks source link

bug: Usage of `editor.chain().focus()` removes focus from tippy popover #412

Closed tautastic closed 15 hours ago

tautastic commented 3 weeks ago

Provide environment information

System: OS: macOS 14.5 CPU: (14) arm64 Apple M3 Max Memory: 68.82 GB / 96.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 21.7.1 - /opt/homebrew/bin/node npm: 10.5.0 - /opt/homebrew/bin/npm pnpm: 9.3.0 - /usr/local/bin/pnpm Watchman: 2024.03.25.00 - /opt/homebrew/bin/watchman

Describe the bug

If we take a look at the color-selector.tsx file, we can see that the text color selection changes the text color like this:

editor.chain().focus().setColor(color || "").run();

while the highlighting color is changed like this:

editor.commands.setHighlight({ color });

The first one causes the tippy popover to lose focus, then appear at the top left corner of the screen, and then regain focus and return to its correct position.

The second one does not do this.

Link to reproduction

https://novel.sh/

To reproduce

  1. Navigate to the example page.
  2. Select any text inside the editor.
  3. Click on the color selector that appears in the popover.
  4. Choose any color from the color selector.
  5. Attempt to select a different color using the color selector.
  6. Observe the described bug occurring when a different color is selected.

Additional information

No response