payloadcms / payload

Payload is the open-source, fullstack Next.js framework, giving you instant backend superpowers. Get a full TypeScript backend and admin panel instantly. Use Payload as a headless CMS or for building powerful applications.
https://payloadcms.com
MIT License
28.61k stars 1.77k forks source link

Some items in the fixed toolbar appear initially enabled even before the editor receives focus #8808

Closed LimChorngUan closed 13 hours ago

LimChorngUan commented 1 month ago

Describe the Bug

Toolbar items in FixedToolbarFeature are not disabled when the lexical editor is not in focused.

Actual Behavior:

Expected Behavior: All toolbar items should be disabled when the editor is unfocused.

Reproduction Steps

  1. Enable lexicalEditor in the e.g. PostCollection with FixedToolbarFeature and other features
     editor: lexicalEditor({
        features: [
          ParagraphFeature(),
          OrderedListFeature(),
          UnorderedListFeature(),
          SubscriptFeature(),
          SuperscriptFeature(),
          FixedToolbarFeature(),
        ]
      }),
  2. Observe the initial state:
    • Dropdown items are disabled when the editor is not on focused. ✅
    • Other toolbar items (e.g., X₂ and X² buttons) are not disabled initially. ❌
  3. Once the editor gains focus, and even after losing focus (when there's no cursor in the editor at all): No toolbar items are disabled anymore, including the dropdown items. ❌

Which area(s) are affected? (Select all that apply)

area: ui, plugin: richtext-lexical

Environment Info

Payload: 3.0.0-beta.116 Node.js: ^18.20.2 || >=20.9.0 Next.js: 15.0.0-canary.173

GermanJablo commented 1 month ago

Clearing selection onBlur is a known issue for Lexical, and I've opened this issue to track it there: https://github.com/facebook/lexical/issues/6622

However, some buttons appearing initially enabled even before the editor receives focus seems like a bug on our end. I'm going to rename this issue to track that part of the problem.

Thanks for reporting!

LimChorngUan commented 1 month ago

Awesome thanks so much!

GermanJablo commented 13 hours ago

I just looked at this issue again. When you talked about enabled and disabled I thought you meant active and inactive (the color that appears when the selection has, for example, subscript, or bold, etc.).

The current behavior is that the X₂ and X² buttons appear enabled even if nothing has been selected yet, because in case the button is pressed the editor is focused and the formatting is applied on the first paragraph, which seems to me a reasonable heuristic and that I think other text editors follow.

I do recognize that the dropdown and buttons could follow the same behavior for consistency, but I don't think this reaches “bug” status. I'm going to close this issue, but I can check a PR if this is important to you and you want to contribute. 😁