@alpaca-editor/core 1.0.3993 → 1.0.3995

package/src/editor/menubar/PageSelector.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { useEditContext } from "../client/editContext";
+import { toast } from "sonner";
 
 import { useDebouncedCallback } from "use-debounce";
 import { FilterInput } from "../../components/FilterInput";
@@ -106,11 +107,7 @@ export function PageSelector({
       if (result.type == "success") {
         setSearchResults(result.data as ResultItem[]);
       } else {
-        editContext.showToast({
-          severity: "error",
-          summary: "Error searching",
-          detail: result.response.statusText,
-        });
+        toast.error(result.response.statusText || "Error searching");
         setSearchResults([]);
       }
     }
@@ -179,83 +176,87 @@ export function PageSelector({
   const hasResults = currentResults.length > 0;
 
   return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <div
-          id="page-selector-button"
-          className="text-dark text-sm0 flex cursor-pointer items-center gap-3 rounded-md p-[7px] py-[9px]"
-          data-testid="page-selector-button"
-        >
-          <div className="flex flex-col">
-            <div className="text-sm font-medium">{item?.name || "unknown"}</div>
-            <div className="text-xs text-gray-500">{item?.path}</div>
-          </div>
-        </div>
-      </PopoverTrigger>
-      <PopoverContent className="w-96 p-0" align="start">
-        <div className="flex h-[75vh] max-h-[600px] max-w-96 min-w-96 flex-col overflow-hidden">
-          {/* Search/Filter bar with view toggle buttons */}
-          <div className="flex gap-2 border-b border-gray-200 p-2">
-            <div className="flex-1">
-              <FilterInput
-                value={query}
-                onChange={setQuery}
-                ref={inputRef}
-                placeholder={
-                  showHistory ? "Filter history..." : "Search content..."
-                }
-                loading={loading}
-                className="w-full"
-                spinnerStyle={{ width: "18px", height: "18px" }}
-              />
-            </div>
-            <div className="flex gap-1">
-              <SimpleIconButton
-                icon="pi pi-sitemap"
-                label="Search Content"
-                selected={!showHistory}
-                onClick={() => setShowHistory(false)}
-                size="small"
-              />
-              <SimpleIconButton
-                icon="pi pi-history"
-                label="Filter History"
-                selected={showHistory}
-                onClick={() => setShowHistory(true)}
-                size="small"
-              />
+    <div className="flex items-center gap-1">
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <div
+            id="page-selector-button"
+            className="text-dark text-sm0 flex cursor-pointer items-center gap-3 rounded-md p-[7px] py-[9px]"
+            data-testid="page-selector-button"
+          >
+            <div className="flex flex-col">
+              <div className="text-sm font-medium">
+                {item?.name || "unknown"}
+              </div>
+              <div className="text-xs text-gray-500">{item?.path}</div>
             </div>
           </div>
+        </PopoverTrigger>
+        <PopoverContent className="w-96 p-0" align="start">
+          <div className="flex h-[75vh] max-h-[600px] max-w-96 min-w-96 flex-col overflow-hidden">
+            {/* Search/Filter bar with view toggle buttons */}
+            <div className="flex gap-2 border-b border-gray-200 p-2">
+              <div className="flex-1">
+                <FilterInput
+                  value={query}
+                  onChange={setQuery}
+                  ref={inputRef}
+                  placeholder={
+                    showHistory ? "Filter history..." : "Search content..."
+                  }
+                  loading={loading}
+                  className="w-full"
+                  spinnerStyle={{ width: "18px", height: "18px" }}
+                />
+              </div>
+              <div className="flex gap-1">
+                <SimpleIconButton
+                  icon="pi pi-sitemap"
+                  label="Search Content"
+                  selected={!showHistory}
+                  onClick={() => setShowHistory(false)}
+                  size="small"
+                />
+                <SimpleIconButton
+                  icon="pi pi-history"
+                  label="Filter History"
+                  selected={showHistory}
+                  onClick={() => setShowHistory(true)}
+                  size="small"
+                />
+              </div>
+            </div>
 
-          {/* Content area */}
-          <div className="flex flex-1 flex-col overflow-hidden">
-            {/* Results area - takes up to 50% when results are present */}
-            {hasResults && (
-              <div className="max-h-[50%] shrink-0 overflow-auto border-b border-gray-200">
-                <div className="p-2">
-                  <ItemList
-                    items={currentResults}
-                    onItemHover={setHoveredItem}
-                    onItemClick={loadItem}
-                    maxItems={20}
-                    className="max-h-full overflow-auto"
-                  />
+            {/* Content area */}
+            <div className="flex flex-1 flex-col overflow-hidden">
+              {/* Results area - takes up to 50% when results are present */}
+              {hasResults && (
+                <div className="max-h-[50%] shrink-0 overflow-auto border-b border-gray-200">
+                  <div className="p-2">
+                    <ItemList
+                      items={currentResults}
+                      onItemHover={setHoveredItem}
+                      onItemClick={loadItem}
+                      maxItems={20}
+                      className="max-h-full overflow-auto"
+                    />
+                  </div>
                 </div>
-              </div>
-            )}
+              )}
 
-            {/* Tree view - always visible, takes remaining space */}
-            <div className="relative min-h-0 flex-1">
-              <div className="absolute inset-0 overflow-auto">
-                <ScrollingContentTree
-                  selectedItemId={hoveredItem?.id ?? item?.id}
-                  onSelectionChange={loadItem}
-                />
+              {/* Tree view - always visible, takes remaining space */}
+              <div className="relative min-h-0 flex-1">
+                <div className="absolute inset-0 overflow-auto">
+                  <ScrollingContentTree
+                    selectedItemId={hoveredItem?.id ?? item?.id}
+                    onSelectionChange={loadItem}
+                  />
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      </PopoverContent>
-    </Popover>
+        </PopoverContent>
+      </Popover>
+    </div>
   );
 }

package/src/editor/reviews/reviewCommands.tsx

@@ -1,6 +1,7 @@
 import { Command, CommandContext, CommandData } from "../commands/commands";
 import { approveReview, rejectReview } from "../services/reviewsService";
 import { Check, X } from "lucide-react";
+import { toast } from "sonner";
 
 export const approveReviewCommand: Command<CommandData> = {
   id: "approveReview",
@@ -11,10 +12,7 @@ export const approveReviewCommand: Command<CommandData> = {
       return;
     }
     await approveReview(context.editContext.currentItemDescriptor);
-    context.editContext.showToast({
-      summary: "Page/item approved",
-      severity: "success",
-    });
+    toast.success("Page/item approved");
   },
   disabled: (context) => {
     return !isReviewer(context);
@@ -29,10 +27,7 @@ export const rejectReviewCommand: Command<CommandData> = {
       return;
     }
     await rejectReview(context.editContext.currentItemDescriptor);
-    context.editContext.showToast({
-      summary: "Page/item rejected",
-      severity: "error",
-    });
+    toast.error("Page/item rejected");
   },
   disabled: (context) => {
     return !isReviewer(context);

package/src/editor/services/favouritesService.ts

@@ -0,0 +1,60 @@
+import { get, post, ExecutionResult } from "./serviceHelper";
+
+// Request/Response Types
+export interface SaveFavoriteRequest {
+  itemId: string;
+  language: string;
+  priority: number;
+}
+
+export interface FavoriteItem {
+  itemId: string;
+  language: string;
+  priority: number;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface ToggleFavoriteResponse {
+  success: boolean;
+  isFavorite: boolean;
+  message: string;
+}
+
+export interface IsFavoriteResponse {
+  isFavorite: boolean;
+}
+
+// Service Functions
+
+/**
+ * Gets all favorites for the current user
+ */
+export async function getAllFavorites(): Promise<
+  ExecutionResult<FavoriteItem[]>
+> {
+  return await get<FavoriteItem[]>("/alpaca/editor/favorites/index");
+}
+
+/**
+ * Toggles a favorite item (adds if not exists, removes if exists)
+ */
+export async function toggleFavorite(
+  request: SaveFavoriteRequest,
+): Promise<ExecutionResult<ToggleFavoriteResponse>> {
+  return await post<ToggleFavoriteResponse>(
+    "/alpaca/editor/favorites/toggle",
+    request,
+  );
+}
+
+/**
+ * Checks if an item is favorited by the current user
+ */
+export async function isFavorite(
+  itemId: string,
+  language: string,
+): Promise<ExecutionResult<IsFavoriteResponse>> {
+  const url = `/alpaca/editor/favorites/isfavorite?itemId=${encodeURIComponent(itemId)}&language=${encodeURIComponent(language)}`;
+  return await get<IsFavoriteResponse>(url);
+}

package/src/editor/sidebar/Debug.tsx

@@ -1,5 +1,5 @@
 import { SimpleTabs, Tab } from "../ui/SimpleTabs";
-import { CopyToClipboardButton } from "../ui/CopyToClipboardButton";
+import { CopyButton } from "../../components/ui/copy-button";
 import { useEffect, useState } from "react";
 
 import { getComponentByIdFromHeadlessLayout } from "../componentTreeHelper";
@@ -102,12 +102,13 @@ export function Debug({}: {}) {
       />
 
       <div className="absolute top-2 right-1 h-4 w-4">
-        <CopyToClipboardButton
-          text={JSON.stringify(
+        <CopyButton
+          textToCopy={JSON.stringify(
             activeTab === 0 && component ? component : page,
             replacer,
             2,
           )}
+          iconOnly
         />
       </div>
     </div>

package/src/editor/sidebar/SEOInfo.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { Button } from "primereact/button";
 import { Divider } from "primereact/divider";
 import { useEditContext } from "../client/editContext";
+import { toast } from "sonner";
 
 interface SEOData {
   title?: string;
@@ -62,11 +63,7 @@ export function SEOInfo() {
       });
 
       // Show immediate feedback
-      editContext.showToast({
-        severity: "info",
-        summary: "SEO Analysis Started",
-        detail: "Analyzing current page content...",
-      });
+      toast.info("Analyzing current page content...");
 
       // Try to send AI analysis request
       const aiServiceUrl =
@@ -175,12 +172,9 @@ Focus on actionable insights for improving search engine visibility.`;
         }
 
         // Show success message
-        editContext.showToast({
-          severity: "success",
-          summary: "SEO Analysis Complete",
-          detail:
-            "AI analysis completed. Check the Comments panel for SEO recommendations.",
-        });
+        toast.success(
+          "AI analysis completed. Check the Comments panel for SEO recommendations.",
+        );
       } else {
         const errorText = await response.text();
         throw new Error(
@@ -189,11 +183,7 @@ Focus on actionable insights for improving search engine visibility.`;
       }
     } catch (error) {
       console.error("SEO analysis failed:", error);
-      editContext.showToast({
-        severity: "warn",
-        summary: "SEO Analysis Partial",
-        detail: "Current page data extracted. AI analysis unavailable.",
-      });
+      toast.warning("Current page data extracted. AI analysis unavailable.");
     } finally {
       setIsAnalyzing(false);
     }

package/src/editor/ui/ItemSearch.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { useEditContext } from "../client/editContext";
 import { executeSearch } from "../services/aiService";
+import { toast } from "sonner";
 import { useDebouncedCallback } from "use-debounce";
 import { ProgressSpinner } from "primereact/progressspinner";
 import { ItemDescriptor } from "../pageModel";
@@ -89,11 +90,7 @@ export const ItemSearch: React.FC<SearchProps> = ({
       if (result.type == "success") {
         setResults(() => result.data as ResultItem[]);
       } else {
-        editContext.showToast({
-          severity: "error",
-          summary: "Error searching",
-          detail: result.response.statusText,
-        });
+        toast.error(result.response.statusText || "Error searching");
       }
     }
     setLoading(false);

package/src/editor/ui/Section.tsx

@@ -18,7 +18,7 @@ export function Section({
           open
             ? "border-blue-500 bg-gray-600"
             : "border-gray-400 bg-gray-400 hover:border-gray-300 hover:bg-gray-500",
-          "flex cursor-pointer items-center justify-between border-l-[8px] px-3 py-2 text-xs text-white transition-all duration-200 ease-in-out",
+          "flex cursor-pointer items-center justify-between border-l-[7px] px-3 py-2 text-xs text-white transition-all duration-200 ease-in-out",
         )}
         onClick={() => setOpen(!open)}
       >

package/src/editor/utils/keyboardNavigation.ts

@@ -0,0 +1,234 @@
+import { EditContextType } from "../client/editContext";
+import { EditorConfiguration } from "../../config/types";
+import { ItemDescriptor, FullItem } from "../pageModel";
+import { HistoryEntry } from "../../types";
+import { useDebouncedCallback } from "use-debounce";
+import { useCallback } from "react";
+
+export interface KeyboardNavigationDependencies {
+  editContextRef: React.MutableRefObject<EditContextType | undefined>;
+  operations: any;
+  pageViewContext: any;
+  configuration: EditorConfiguration;
+  contentEditorItem: FullItem | undefined;
+  browseHistory: HistoryEntry[];
+  loadItem: (
+    itemToLoad: ItemDescriptor | string,
+    options?: { addToBrowseHistory?: boolean; skipViewChange?: boolean },
+  ) => Promise<FullItem | undefined>;
+  showInfoToast: (props: { summary?: string; details?: string }) => void;
+  showErrorToast: (props: { summary?: string; details?: string }) => void;
+  executeCommand: (params: {
+    command: any;
+    data?: any;
+    event?: React.SyntheticEvent;
+  }) => Promise<any>;
+}
+
+export function useKeyboardNavigation(deps: KeyboardNavigationDependencies) {
+  const {
+    editContextRef,
+    operations,
+    pageViewContext,
+    configuration,
+    contentEditorItem,
+    browseHistory,
+    loadItem,
+    showInfoToast,
+    executeCommand,
+  } = deps;
+
+  const handleKeyDownDebounced = useDebouncedCallback(
+    async (event: KeyboardEvent) => {
+      if (!event.key) return;
+
+      if (event.ctrlKey && event.key === "z") {
+        await operations.undo();
+      }
+      if (event.ctrlKey && event.key === "y") {
+        await operations.redo();
+      }
+      if (event.ctrlKey && event.key === "F11") {
+        event.preventDefault();
+        pageViewContext.setFullscreen(false);
+      }
+
+      // History Navigation (Alt + Arrow keys, Alt + Shift + Arrow keys for favorites only)
+      if (
+        event.altKey &&
+        (event.key === "ArrowLeft" || event.key === "ArrowRight")
+      ) {
+        event.preventDefault();
+        const currentItem = contentEditorItem;
+        if (!currentItem) return;
+
+        let historyToNavigate = browseHistory;
+
+        // If Shift is also pressed, filter history to only include favorites
+        if (event.shiftKey) {
+          if (editContextRef.current?.favorites) {
+            const favoriteIds = new Set(
+              editContextRef.current.favorites.map(
+                (fav: any) => `${fav.itemId}:${fav.language}`,
+              ),
+            );
+
+            historyToNavigate = browseHistory.filter((historyItem) =>
+              favoriteIds.has(`${historyItem.id}:${historyItem.language}`),
+            );
+
+            if (historyToNavigate.length === 0) {
+              showInfoToast({
+                summary: "Navigation",
+                details: "No favorite items found in browse history",
+              });
+              return;
+            }
+          } else {
+            showInfoToast({
+              summary: "Navigation",
+              details: "Favorites not loaded yet",
+            });
+            return;
+          }
+        }
+
+        const currentIndex = historyToNavigate.findIndex(
+          (x) => x.id === currentItem.id && x.language === currentItem.language,
+        );
+
+        if (
+          event.key === "ArrowLeft" &&
+          currentIndex < historyToNavigate.length - 1
+        ) {
+          // Go forward in history
+          const historyItem = historyToNavigate[currentIndex + 1];
+          if (historyItem) {
+            loadItem(
+              {
+                id: historyItem.id,
+                language: historyItem.language,
+                version: historyItem.version || 0,
+              },
+              { addToBrowseHistory: false },
+            );
+          }
+        } else if (event.key === "ArrowRight" && currentIndex > 0) {
+          // Go back in history
+          const historyItem = historyToNavigate[currentIndex - 1];
+          if (historyItem) {
+            loadItem(
+              {
+                id: historyItem.id,
+                language: historyItem.language,
+                version: historyItem.version || 0,
+              },
+              { addToBrowseHistory: false },
+            );
+          }
+        }
+        return;
+      }
+
+      // Quick access to favorites (Ctrl + 1-9)
+      if (event.altKey && /^[1-9]$/.test(event.key)) {
+        event.preventDefault();
+        const index = parseInt(event.key) - 1;
+
+        // Use favorites from editContext
+        if (editContextRef.current?.favorites) {
+          const favorites = editContextRef.current.favorites;
+          if (favorites[index]) {
+            const favorite = favorites[index];
+            loadItem({
+              id: favorite.itemId,
+              language: favorite.language,
+              version: 0,
+            });
+          } else {
+            showInfoToast({
+              summary: "Favorites",
+              details: `No favorite item at position ${event.key}`,
+            });
+          }
+        } else {
+          showInfoToast({
+            summary: "Favorites",
+            details: "Favorites not loaded yet",
+          });
+        }
+        return;
+      }
+
+      // Command execution
+      const command = configuration.commands.allItemCommands.find(
+        (x) => x.keyBinding === event.key,
+      );
+
+      if (command) {
+        event.preventDefault();
+        const contentEditorItem = editContextRef.current?.contentEditorItem;
+        if (!contentEditorItem) return;
+
+        const items =
+          editContextRef.current?.selection?.map((x) => ({
+            id: x,
+            language: contentEditorItem.language,
+            version: 0,
+          })) || [];
+
+        if (!items.length) items.push(contentEditorItem.descriptor);
+
+        if (items.length > 0) {
+          const fullItems =
+            await editContextRef.current?.itemsRepository.getItems(items);
+          executeCommand({
+            command,
+            data: {
+              items: fullItems,
+            },
+          });
+        }
+      }
+    },
+    50,
+  );
+
+  const handleKeyDown = useCallback(
+    async (event: KeyboardEvent) => {
+      if (event.key === "Insert") {
+        event.preventDefault();
+        event.stopPropagation();
+        editContextRef.current?.setInsertMode((x) => !x);
+      }
+
+      if (event.ctrlKey && event.key === "s") {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+
+      const target = event.target as HTMLElement;
+      const isTyping =
+        target instanceof HTMLInputElement ||
+        target instanceof HTMLTextAreaElement ||
+        target.isContentEditable;
+
+      if (
+        (event.ctrlKey && event.key === "z") ||
+        (event.ctrlKey && event.key === "y")
+      ) {
+        if (!isTyping) {
+          event.preventDefault();
+          event.stopPropagation();
+          handleKeyDownDebounced(event);
+        }
+        return;
+      }
+      handleKeyDownDebounced(event);
+    },
+    [handleKeyDownDebounced, editContextRef],
+  );
+
+  return { handleKeyDown };
+}

package/src/page-wizard/PageWizard.tsx

@@ -36,8 +36,8 @@ export type SchemaField = {
 export type WizardSchemaComponent = {
   type: string;
   fields: WizardSchemaField[];
-  availableParentPlaceholders?: string[];
-  allowedChildrenComponentTypes: string[];
+  validParentPlaceholders?: string[];
+  allowedChildrenComponentTypes?: string[];
   allowedOnRoot: boolean;
 };
 

package/src/page-wizard/steps/ContentStep.tsx

@@ -507,11 +507,11 @@ export function ContentStep({
       const localAbortController = new AbortController();
       setAbortController(localAbortController);
 
-      // Get the existing page model
-      const existingPageModel = await convertToAiPageModel(
-        editContextRef.current?.page!,
-        editContextRef.current!,
-      );
+      // Get the existing page model; TODO make optional
+      const existingPageModel = undefined; // await convertToAiPageModel(
+      //editContextRef.current?.page!,
+      //editContextRef.current!,
+      //);
 
       console.log("Existing page model: ", existingPageModel);
 
@@ -523,7 +523,7 @@ export function ContentStep({
             Generate a descriptive name for each component including the topic.
               Only use component types that are in the page schema.
               Keep existing components with their ids. Leave id field empty for new components.
-            Existing page model: ${JSON.stringify(existingPageModel)}
+            ${existingPageModel && `Existing page model: ${JSON.stringify(existingPageModel)}`}
           Fill empty fields of existing components before you insert new components.
             Component types: ${JSON.stringify(
               filteredSchema,