sanity icon indicating copy to clipboard operation
sanity copied to clipboard

fix(core): portable text annotations slow to show

Open pedrobonamin opened this issue 4 months ago • 4 comments

Description

Adding an annotation inside the PTE editor is perceived as slow, this is mainly because the annotation needs the annotation value to exist in the form value before being able to show the Popover for it. Also:

  • The Add comment button reappears in place of the annotation after clicking "add annotation."
  • The annotation edit/discard toolbar appears before the annotation popover renders.
  • The annotation in PTE changes its style before the annotation popover renders.
  • The popover takes about 1 second to render after clicking and doesn't focus.

Comments Input:

  • Added a blurred state to track when the editor loses focus, preventing immediate comment input display upon regaining focus (CommentsPortableTextInput.tsx).

Annotation:

  • Introduced isReady state to ensure the annotation toolbar popover is only rendered when children are present , this means that the member exists. (Annotation.tsx).

Focus in Popover Modal:

  • Implemented an effect to automatically focus the first input element when the popover modal content is rendered (PopoverModal.tsx).

[!NOTE]
Upcoming changes: The portable text editor package will be update to not debounce the addAnnotation action

https://github.com/user-attachments/assets/7eadd32a-08a7-4306-8fb9-a5d5666a0c89

What to review

Are this changes correct? Is there any oversight to fix?

Testing

Visit a PTE field in the studio, add an annotation, the toolbar and comments button should not show. The first input should be focused once annotations render. https://test-next-studio-git-pte-annotations.sanity.dev/test/structure/input-standard;portable-text;pt_allTheBellsAndWhistles;834d6ed4-7cb1-47b9-a533-a734e0f78693

Notes for release

Update annotations creations in portable text, autofocus on the first input.

pedrobonamin avatar Oct 04 '24 11:10 pedrobonamin