plate icon indicating copy to clipboard operation
plate copied to clipboard

Toolbar button not updated

Open kdurek opened this issue 2 years ago • 5 comments

Description

Button [data-on] state is not updated

Works perfectly fine on "@udecode/plate-common": "^24.3.5" but is broken on "@udecode/plate-common": "^24.4.0"

Steps to Reproduce

Select text Make it for example bold Click somewhere else Button o toolbar is not updated

Basically this one video https://github.com/udecode/plate/assets/21038648/b8895e02-2483-4303-bc44-33ac3908b83c

Environment

  • slate: 0.94.1
  • slate-react: 0.99.0
  • browser: chrome

Funding

  • You can sponsor this specific effort via a Polar.sh pledge below
  • We receive the pledge once the issue is completed & verified
Fund with Polar

kdurek avatar Oct 17 '23 10:10 kdurek

Same issue. The issue is visible in the website examples too.

The behaviour is slightly different for the floating toolbar and the fixed tool bar : image Then choose bold : image Then unselect bold from the fixed toolbar : image While unselecting from the floating toolbar gives: image

jide avatar Oct 17 '23 15:10 jide

I've been trying to fix this but not making a ton of progress.

I do believe however it's due to the shared state across toolbars interacting with the ToolbarToggleGroup:

<ToolbarToggleGroup
      type="single"
      value={pressed ? 'single' : undefined}
>

in toolbar.tsx

If I comment out the value line here, only the button in the toolbar that was clicked toggles. Also, the radix-ui docs state the value prop must be used in conjunction with onValueChange:

The controlled value of the pressed item when type is "single". Must be used in conjunction with onValueChange.

I've experimented with that to no avail. I have noticed when clicking that it is in sync every 4th click (two on/off cycles) as though the radix "single" ToolbarToggleGroup duplicated and shared across both 2 toolbars is throwing off the toggle. See video below.

Screencast from 11-11-23 21:54:33.webm

Indeed, if you log out the value using onValueChange, you'll see it follows this pattern for each click:

"single" --> undefined --> undefined --> undefined (finally both buttons clear) --> restart cycle If someone has more insight, I'd love to open a PR for this.

EandrewJones avatar Nov 12 '23 03:11 EandrewJones

@EandrewJones Thanks for looking into this!

@zbeyens Any idea what's going on here?

12joan avatar Nov 12 '23 08:11 12joan

Same issue. fix like the solution#2742

tomdyqin avatar Nov 14 '23 02:11 tomdyqin

Wow, really that simple, huh? I suppose I was overthinking it.

Best

Evan Jones Website: www.ea-jones.com

On Mon, Nov 13, 2023 at 9:05 PM Tomdy Qin @.***> wrote:

u can see the solution#2742 https://github.com/udecode/plate/pull/2742

— Reply to this email directly, view it on GitHub https://github.com/udecode/plate/issues/2707#issuecomment-1809425779, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJ2T6AOE4LRKZM3GT2B2ZNDYELGXFAVCNFSM6AAAAAA6DTPHIOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMBZGQZDKNZXHE . You are receiving this because you were mentioned.Message ID: @.***>

EandrewJones avatar Nov 14 '23 02:11 EandrewJones