feat: add whiteboard library template hooks (0.18 line)

.github/workflows/lint.yml

@@ -9,10 +9,10 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - name: Setup Node.js 18.x
+      - name: Setup Node.js 20.x
         uses: actions/setup-node@v2
         with:
-          node-version: 18.x
+          node-version: 20.x
 
       - name: Install and lint
         run: |

packages/excalidraw/components/LibraryMenu.tsx

@@ -60,6 +60,8 @@ const LibraryMenuContent = memo(
     theme,
     selectedItems,
     onSelectItems,
+    libraryMenuTitle,
+    libraryMenuDescription,
   }: {
     pendingElements: LibraryItem["elements"];
     onInsertLibraryItems: (libraryItems: LibraryItems) => void;
@@ -71,6 +73,8 @@ const LibraryMenuContent = memo(
     theme: UIAppState["theme"];
     selectedItems: LibraryItem["id"][];
     onSelectItems: (id: LibraryItem["id"][]) => void;
+    libraryMenuTitle: ExcalidrawProps["libraryMenuTitle"];
+    libraryMenuDescription: ExcalidrawProps["libraryMenuDescription"];
   }) => {
     const [libraryItemsData] = useAtom(libraryItemsAtom);
 
@@ -144,6 +148,8 @@ const LibraryMenuContent = memo(
           theme={theme}
           onSelectItems={onSelectItems}
           selectedItems={selectedItems}
+          libraryMenuTitle={libraryMenuTitle}
+          libraryMenuDescription={libraryMenuDescription}
         />
         {showBtn && (
           <LibraryMenuControlButtons
@@ -285,6 +291,8 @@ export const LibraryMenu = memo(() => {
       theme={appState.theme}
       selectedItems={selectedItems}
       onSelectItems={setSelectedItems}
+      libraryMenuTitle={appProps.libraryMenuTitle}
+      libraryMenuDescription={appProps.libraryMenuDescription}
     />
   );
 });

packages/excalidraw/components/LibraryMenuHeaderContent.tsx

@@ -2,14 +2,21 @@ import { useCallback, useState } from "react";
 import { t } from "../i18n";
 import Trans from "./Trans";
 import { useAtom } from "../editor-jotai";
-import type { LibraryItem, LibraryItems, UIAppState } from "../types";
-import { useApp, useExcalidrawSetAppState } from "./App";
+import type {
+  ExcalidrawProps,
+  LibraryItem,
+  LibraryItems,
+  TaggedLibraryItem,
+  UIAppState,
+} from "../types";
+import { useApp, useAppProps, useExcalidrawSetAppState } from "./App";
 import { saveLibraryAsJSON } from "../data/json";
 import type Library from "../data/library";
 import { libraryItemsAtom } from "../data/library";
 import {
   DotsIcon,
   ExportIcon,
+  LibraryIcon,
   LoadIcon,
   publishIcon,
   TrashIcon,
@@ -31,13 +38,20 @@ const getSelectedItems = (
   selectedItems: LibraryItem["id"][],
 ) => libraryItems.filter((item) => selectedItems.includes(item.id));
 
+// Items from a read-only source (a saved or organization library) carry a
+// `libraryName`; only untagged "My library" items are writable.
+const getWritableItems = (libraryItems: LibraryItems) =>
+  libraryItems.filter((item) => !(item as TaggedLibraryItem).libraryName);
+
 export const LibraryDropdownMenuButton: React.FC<{
   setAppState: React.Component<any, UIAppState>["setState"];
   selectedItems: LibraryItem["id"][];
   library: Library;
   onRemoveFromLibrary: () => void;
   resetLibrary: () => void;
   onSelectItems: (items: LibraryItem["id"][]) => void;
+  onSaveAs?: ExcalidrawProps["onLibrarySaveAs"];
+  onSaveAsCanvasTemplate?: ExcalidrawProps["onSaveAsCanvasTemplate"];
   appState: UIAppState;
   className?: string;
 }> = ({
@@ -47,6 +61,8 @@ export const LibraryDropdownMenuButton: React.FC<{
   onRemoveFromLibrary,
   resetLibrary,
   onSelectItems,
+  onSaveAs,
+  onSaveAsCanvasTemplate,
   appState,
   className,
 }) => {
@@ -90,6 +106,7 @@ export const LibraryDropdownMenuButton: React.FC<{
         selectedItems.includes(item.id),
       )
     : libraryItemsData.libraryItems;
+  const writableItemsCount = getWritableItems(items).length;
   const resetLabel = itemsSelected
     ? t("buttons.remove")
     : t("buttons.resetLibrary");
@@ -185,6 +202,36 @@ export const LibraryDropdownMenuButton: React.FC<{
       });
   };
 
+  const onLibrarySaveAs = async () => {
+    if (!onSaveAs) {
+      return;
+    }
+    // Never save read-only source items into a new library — that would
+    // snapshot another library's content instead of referencing it live.
+    const libraryItems = getWritableItems(
+      itemsSelected ? items : await library.getLatestLibrary(),
+    );
+    if (!libraryItems.length) {
+      return;
+    }
+    try {
+      await onSaveAs(libraryItems);
+    } catch (error: any) {
+      setAppState({ errorMessage: error.message });
+    }
+  };
+
+  const onCanvasSaveAsTemplate = async () => {
+    if (!onSaveAsCanvasTemplate) {
+      return;
+    }
+    try {
+      await onSaveAsCanvasTemplate();
+    } catch (error: any) {
+      setAppState({ errorMessage: error.message });
+    }
+  };
+
   const renderLibraryMenu = () => {
     return (
       <DropdownMenu open={isLibraryMenuOpen}>
@@ -204,7 +251,7 @@ export const LibraryDropdownMenuButton: React.FC<{
               icon={LoadIcon}
               data-testid="lib-dropdown--load"
             >
-              {t("buttons.load")}
+              {t("buttons.loadLibraryFile")}
             </DropdownMenu.Item>
           )}
           {!!items.length && (
@@ -216,12 +263,22 @@ export const LibraryDropdownMenuButton: React.FC<{
               {t("buttons.export")}
             </DropdownMenu.Item>
           )}
-          {!!items.length && (
+          {onSaveAs && !!writableItemsCount && (
             <DropdownMenu.Item
-              onSelect={() => setShowRemoveLibAlert(true)}
-              icon={TrashIcon}
+              onSelect={onLibrarySaveAs}
+              icon={LibraryIcon}
+              data-testid="lib-dropdown--save-as-library"
             >
-              {resetLabel}
+              {t("buttons.saveAsLibrary")}
+            </DropdownMenu.Item>
+          )}
+          {onSaveAsCanvasTemplate && !itemsSelected && (
+            <DropdownMenu.Item
+              onSelect={onCanvasSaveAsTemplate}
+              icon={LibraryIcon}
+              data-testid="lib-dropdown--save-as-canvas-template"
+            >
+              {t("buttons.saveAsCanvasTemplate")}
             </DropdownMenu.Item>
           )}
           {itemsSelected && (
@@ -233,6 +290,14 @@ export const LibraryDropdownMenuButton: React.FC<{
               {t("buttons.publishLibrary")}
             </DropdownMenu.Item>
           )}
+          {!!writableItemsCount && (
+            <DropdownMenu.Item
+              onSelect={() => setShowRemoveLibAlert(true)}
+              icon={TrashIcon}
+            >
+              {resetLabel}
+            </DropdownMenu.Item>
+          )}
         </DropdownMenu.Content>
       </DropdownMenu>
     );
@@ -280,6 +345,7 @@ export const LibraryDropdownMenu = ({
   className?: string;
 }) => {
   const { library } = useApp();
+  const appProps = useAppProps();
   const { clearLibraryCache, deleteItemsFromLibraryCache } = useLibraryCache();
   const appState = useUIAppState();
   const setAppState = useExcalidrawSetAppState();
@@ -300,7 +366,12 @@ export const LibraryDropdownMenu = ({
   };
 
   const resetLibrary = () => {
-    library.resetLibrary();
+    // Reset only clears the writable "My library" — items from read-only
+    // sources (saved/org libraries) stay, they are resolved per board.
+    const readonlyItems = libraryItemsData.libraryItems.filter(
+      (item) => !!(item as TaggedLibraryItem).libraryName,
+    );
+    library.setLibrary(readonlyItems);
     clearLibraryCache();
   };
 
@@ -314,6 +385,8 @@ export const LibraryDropdownMenu = ({
       onRemoveFromLibrary={() =>
         removeFromLibrary(libraryItemsData.libraryItems)
       }
+      onSaveAs={appProps.onLibrarySaveAs}
+      onSaveAsCanvasTemplate={appProps.onSaveAsCanvasTemplate}
       resetLibrary={resetLibrary}
       className={className}
     />

packages/excalidraw/components/LibraryMenuItems.scss

@@ -71,6 +71,33 @@
       &--excal {
         margin-top: 2rem;
       }
+
+      &--stacked {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.25rem;
+      }
+
+      &__description {
+        color: var(--color-border-outline);
+        font-size: 0.8125rem;
+        font-weight: 400;
+        line-height: 1.35;
+      }
+
+      &__hint {
+        margin-left: auto;
+        font-size: 10px;
+        color: var(--color-border-outline);
+        font-weight: 400;
+
+        kbd {
+          font-family: monospace;
+          border: 1px solid var(--color-border-outline);
+          border-radius: 4px;
+          padding: 1px 3px;
+        }
+      }
     }
 
     &__grid {