feat: Add library items to Command palette on search

[nickfujita]

Description

• Adds ability to insert items from your library from the Command palette
• Only shows items from library if 2 or more characters are entered into the text prompt

Motivation

• When creating system diagrams, especially with AWS, having to manually search through the items in the library becomes time consuming (especially when AWS and/or GCP icons are all loaded). Since we now have the handle Command palette feature that can be brought up by hotkeys (cmd + /), it would make it very easy to simply hit the hotkey, then start typing the element you want to add then pressing enter. (example: cmd+/, type "clo", CloudFront appears, press Enter, and it's added).

Assumptions & Limitations

• All library items are NOT added to the Command palette list when nothing is typed in the text input (or less than 2 characters).
  • This is because the Command palette doesn't seem to be the optimal place to visually browse for a list of components (that's what the LibraryMenu is for), but rather it should be just to search for.
  • Adding potentially hundreds of items makes the UI sluggish (we can probably easily solve this, but not worth it given previous point)
• ONLY library items published with a name metadata field will be included in the search results since there's no other way to identify the older ones
  • So for all previously published Library collections they need to be updated (not sure if this is possible), or republished
• The icons in the Command palette for each library item is so small that it's not clearly visible. However, since this is again meant to be a quick way to add items via hotkey this small icon is really just for quick recognition (esp. in the case there are items with duplicate or very similar names)

Future work

• It would be great if there was a hosted queryable library of ALL items, and entering this search also queries that service. However, this seems more like a Excalidraw+ feature request.
• Add a 'name' or 'title' field to published library collections. This way we can have a way to better display the name of the items in the case there are duplicate names (eg. AWS.something, GCP.something)

Test instructions

Add a Library collection with named elements. A good one is the AWS Architecture Icons

Case 1

• Pull up the Command palette using the hotkeys Cmd + / or Cmd + Shift + P
• Start typing the name of a known item in your library
• Once your query is specific enough that it's the first item, press Enter
• It should be added inserted to the canvas

Case 2

• Pull up the Command palette using the hotkeys Cmd + / or Cmd + Shift + P
• Start typing the name of a known item in your library
• Once you see it in the list, use the down arrow to select it and press Enter
• It should be added inserted to the canvas

Case 3

• Pull up the Command palette using the hotkeys Cmd + / or Cmd + Shift + P
• Start typing the name of a known item in your library
• Once you see it in the list, click on it with your mouse
• It should be added inserted to the canvas

Case 4

• Pull up the Command palette using the hotkeys Cmd + / or Cmd + Shift + P
• Your last added item should be first on the list
• Press enter should add it to the canvas

[vercel]

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

Name	Status	Preview	Updated (UTC)
docs	✅ Ready (Inspect)	Visit Preview	May 27, 2024 10:35am
excalidraw	✅ Ready (Inspect)	Visit Preview	May 27, 2024 10:35am
excalidraw-package-example	✅ Ready (Inspect)	Visit Preview	May 27, 2024 10:35am
excalidraw-package-example-with-nextjs	✅ Ready (Inspect)	Visit Preview	May 27, 2024 10:35am

[fredrikj31]

Great addition to the application. This will speed up working with different libraries ⭐🚀

[jean-pasqualini]

Why are the lint, semantic and test stucked in watiing for status ?

[nickfujita]

@jean-pasqualini It's my first contribution to this public repo, so I think someone from the team needs to approve the workflow runs.

Hi @dwelle, was wondering if you could please approve the test and lint workflows on this PR? Also I see you have made a couple of other PRs recently related to the command palette. Would it be possible to get your review on this as well? 🙏🏼

[nickfujita]

@dwelle Updated this branch with your latest command palette updates from master. Was wondering if I could trouble you for a review? 🙏🏼