[lexical-playground] Improve Excalidraw Integration By Only Creating Node After Saving Drawing

[neysanfoo]

Description

This PR refactors the Excalidraw integration in the Lexical playground. These changes aim to make the Excalidraw integration more maintainable and consistent with the practices used in the other plugins, such as the image/equation plugin. The main changes include:

• Moving the ExcalidrawModal from nodes folder into the ui folder.
• Modified the workflow so that the Excalidraw node is only created after content is saved in the modal
• The unmerged changes for the 3 bug fixes in [lexical-playground] 3 Bug Fixes, 1 UX Improvement: All Regarding Excalidraw Node #6666

The improved functionalities include:

• Prevents adding modal to the undo/redo history stack. Undo and redo in both single user and collab mode works as expected.
• Fixes issue Excalidraw modal shows on collab when the other person interacts with it #1788.
• Fixes the 3 bugs as described in [lexical-playground] 3 Bug Fixes, 1 UX Improvement: All Regarding Excalidraw Node #6666.

Code Changes

Before

The Excalidraw node was created immediately upon invoking the INSERT_EXCALIDRAW_COMMAND from the toolbar.

After

• The INSERT_EXCALIDRAW_COMMAND now opens the ExcalidrawModal without immediately creating a node
• The Excalidraw node is only created after the user saves content in the modal
• The ExcalidrawModal is now a UI component.
• All existing functionality (editing, resizing, etc.) is preserved. I have checked all permutations of creating/editing and discarding/saving images and it works as expected.

Collab Mode

Before

collab_mode_before.mov

After

collab_mode_after.mov

Single User Mode

Refer to #6666 under the UX improvements section. The UX is the same, but instead of using "history-merge" to achieve it, I have now decoupled the modal and node creation.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
lexical	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 30, 2024 8:41am
lexical-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 30, 2024 8:41am

[github-actions]

size-limit report 📦

Path	Size
lexical - cjs	29.82 KB (0%)
lexical - esm	29.67 KB (0%)
@lexical/rich-text - cjs	38.42 KB (0%)
@lexical/rich-text - esm	31.51 KB (0%)
@lexical/plain-text - cjs	37.01 KB (0%)
@lexical/plain-text - esm	28.9 KB (0%)
@lexical/react - cjs	40.17 KB (0%)
@lexical/react - esm	32.97 KB (0%)