[lexical-playground] Bug Fix: Disable editing of Excalidraw Component in Read-Only Mode

[neysanfoo]

Description

Currently, the excalidraw component is still showing the edit modal button/double click to edit functionality when in read-only mode. Another problem is that this part of the code here is causing any read-only editor that uses this plugin to be editing mode.

useEffect(() => {
    if (isModalOpen) {
      editor.setEditable(false);
    } else {
      editor.setEditable(true);
    }
  }, [isModalOpen, editor]);

I have removed it all together, which means that the editor will not be in read-only mode when the modal is open, but that doesn't seem to cause any problems, and we don't put the editor in read-only mode for any of the other modal based plugins like equation/images.

Changes in this PR

• Excalidraw modal editor cannot be opened in read-only mode
• Prevent selecting component when in read-only mode
• Clear selection when going from editing to read-only mode
• Event handlers and commands related to editing are not registered or executed in read-only mode
• Use the useLexicalEditor hook for consistency

Before

excal_readonly_before.mov

After

excal_readonly_after.mov

[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	Oct 22, 2024 0:38am
lexical-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 22, 2024 0:38am

[github-actions]

size-limit report 📦

Path	Size
lexical - cjs	29.94 KB (0%)
lexical - esm	29.78 KB (0%)
@lexical/rich-text - cjs	38.53 KB (0%)
@lexical/rich-text - esm	31.6 KB (0%)
@lexical/plain-text - cjs	37.14 KB (0%)
@lexical/plain-text - esm	29 KB (0%)
@lexical/react - cjs	40.34 KB (0%)
@lexical/react - esm	33 KB (0%)