search

facebook / lexical

Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.
https://lexical.dev
MIT License
19.95k stars 1.7k forks source link

Bug: In storybook, DraggableBlockPlugin does not work #6818

Open lin-mt opened 1 week ago

lin-mt commented 1 week ago

Lexical version: 0.20.0

Steps To Reproduce

Most of the code is copied from Lexical Playground.

  1. git clone https://github.com/lin-mt/quiet-lexical/tree/tag/draggable-blok-not-working
  2. npm install
  3. npm run storybook
  4. open http://localhost:6006/?path=/story/docs-quietlexical--default

Link to code example:

https://github.com/lin-mt/quiet-lexical/tree/tag/draggable-blok-not-working

The current behavior

transform is always translate(-10000px, -10000px);

image

The expected behavior

In Vite, the same code, DraggableBlockPlugin is effective and can be used normally.

  1. git clone https://github.com/lin-mt/lexical-test
  2. npm install
  3. npm run dev
image

Impact of fix

This issue is 100% reproducible, but I'm not sure if it's a storybook issue or a lexical issue, so I also tried it on dumi, and the problem still exists.

This issue has been fixed. If this issue is a lexical issue, any user who uses lexical to build components in storybook will benefit from it.

etrepum commented 1 week ago

I would guess that this has something to do with lexical's floating menu code, there have historically been a lot of bugs in there especially when there's a container that has any sort of zoom or non-default positioning (e.g. scroll) that would interfere with calculations that just don't take everything into account.