@alpaca-editor/core 1.0.3992 → 1.0.3995

package/src/editor/menubar/FavoritesControls.tsx

@@ -0,0 +1,250 @@
+import { useEffect, useState } from "react";
+import { Star, ChevronDown, X } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+} from "../../components/ui/dropdown-menu";
+import { Button } from "../../components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../../components/ui/tooltip";
+import * as favouritesService from "../services/favouritesService";
+import { ItemDescriptor, FullItem } from "../pageModel";
+import { EditContextType } from "../client/editContext";
+import { toast } from "sonner";
+
+interface FavoritesControlsProps {
+  itemDescriptor: ItemDescriptor;
+  editContext: EditContextType;
+}
+
+export function FavoritesControls({
+  itemDescriptor,
+  editContext,
+}: FavoritesControlsProps) {
+  // Favorites state
+  const [isFavorite, setIsFavorite] = useState(false);
+  const [favorites, setFavorites] = useState<favouritesService.FavoriteItem[]>(
+    [],
+  );
+  const [favoritesLoading, setFavoritesLoading] = useState(false);
+  const [favoriteItems, setFavoriteItems] = useState<Map<string, FullItem>>(
+    new Map(),
+  );
+
+  // Check if current page is favorite by looking at the favorites list
+  const checkFavoriteStatus = () => {
+    if (!itemDescriptor) {
+      setIsFavorite(false);
+      return;
+    }
+
+    const isCurrentItemFavorite = favorites.some(
+      (favorite) =>
+        favorite.itemId === itemDescriptor.id &&
+        favorite.language === itemDescriptor.language,
+    );
+    setIsFavorite(isCurrentItemFavorite);
+  };
+
+  // Toggle favorite status
+  const toggleFavorite = async () => {
+    if (!itemDescriptor) return;
+
+    try {
+      const result = await favouritesService.toggleFavorite({
+        itemId: itemDescriptor.id,
+        language: itemDescriptor.language,
+        priority: 1, // Default priority
+      });
+
+      if (result.type === "success" && result.data) {
+        // Refresh favorites list (isFavorite will be updated automatically via useEffect)
+        loadFavorites();
+      } else {
+      }
+    } catch (error) {
+      toast.error("Failed to toggle favorite");
+    }
+  };
+
+  // Load all favorites
+  const loadFavorites = async () => {
+    setFavoritesLoading(true);
+    try {
+      const result = await favouritesService.getAllFavorites();
+
+      if (result.type === "success" && result.data) {
+        // Sort favorites by priority descending (highest priority first)
+        const sortedFavorites = result.data.sort(
+          (a, b) => b.priority - a.priority,
+        );
+        setFavorites(sortedFavorites);
+
+        // Load item details for each favorite
+        const itemMap = new Map<string, FullItem>();
+        for (const favorite of sortedFavorites) {
+          try {
+            const item = await editContext?.itemsRepository.getItem({
+              id: favorite.itemId,
+              language: favorite.language,
+              version: 0,
+            });
+            if (item) {
+              itemMap.set(`${favorite.itemId}-${favorite.language}`, item);
+            }
+          } catch (error) {
+            // Silently ignore item loading errors
+          }
+        }
+        setFavoriteItems(itemMap);
+      }
+    } catch (error) {
+      // Silently ignore favorites loading errors
+    } finally {
+      setFavoritesLoading(false);
+    }
+  };
+
+  // Navigate to favorite item
+  const navigateToFavorite = async (
+    favorite: favouritesService.FavoriteItem,
+  ) => {
+    editContext?.loadItem({
+      id: favorite.itemId,
+      language: favorite.language,
+      version: 0, // Use latest version
+    });
+  };
+
+  // Remove a specific favorite item
+  const removeFavorite = async (
+    favorite: favouritesService.FavoriteItem,
+    event: React.MouseEvent,
+  ) => {
+    event.stopPropagation(); // Prevent navigation when clicking remove button
+
+    try {
+      const result = await favouritesService.toggleFavorite({
+        itemId: favorite.itemId,
+        language: favorite.language,
+        priority: favorite.priority,
+      });
+
+      if (result.type === "success" && result.data) {
+        // Refresh favorites list (isFavorite will be updated automatically via useEffect)
+        loadFavorites();
+      } else {
+        toast.error("Failed to remove favorite");
+      }
+    } catch (error) {
+      toast.error("Failed to remove favorite");
+    }
+  };
+
+  useEffect(() => {
+    loadFavorites();
+  }, [itemDescriptor]);
+
+  // Check favorite status whenever favorites list or itemDescriptor changes
+  useEffect(() => {
+    checkFavoriteStatus();
+  }, [favorites, itemDescriptor]);
+
+  return (
+    <div className="flex items-center">
+      {/* Star button for toggling favorite */}
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={toggleFavorite}
+            className="h-8 w-7"
+          >
+            {isFavorite ? (
+              <Star
+                className="fill-theme-secondary text-theme-secondary h-4 w-4"
+                strokeWidth={1}
+              />
+            ) : (
+              <Star className="h-4 w-4 text-gray-400" strokeWidth={1} />
+            )}
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          {isFavorite ? "Remove from favorites" : "Add to favorites"}
+        </TooltipContent>
+      </Tooltip>
+
+      {/* Favorites dropdown */}
+      <DropdownMenu>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="sm" className="h-8 w-7 p-0">
+                <ChevronDown className="h-4 w-4" strokeWidth={1} />
+              </Button>
+            </DropdownMenuTrigger>
+          </TooltipTrigger>
+          <TooltipContent>View favorites</TooltipContent>
+        </Tooltip>
+        <DropdownMenuContent align="start" className="w-80">
+          <div className="px-2 py-1.5 text-sm font-medium">Favorites</div>
+          <DropdownMenuSeparator />
+          {favoritesLoading ? (
+            <div className="px-2 py-4 text-center text-sm text-gray-500">
+              Loading favorites...
+            </div>
+          ) : favorites.length === 0 ? (
+            <div className="px-2 py-4 text-center text-sm text-gray-500">
+              No favorites yet
+            </div>
+          ) : (
+            <div className="max-h-60 overflow-auto">
+              {favorites.map((favorite) => {
+                const itemKey = `${favorite.itemId}-${favorite.language}`;
+                const item = favoriteItems.get(itemKey);
+
+                return (
+                  <DropdownMenuItem
+                    key={itemKey}
+                    onClick={() => navigateToFavorite(favorite)}
+                    className="flex items-start justify-between px-2 py-2"
+                  >
+                    <div className="flex min-w-0 flex-1 flex-col">
+                      <div className="truncate text-sm font-medium">
+                        {item?.name || favorite.itemId}
+                      </div>
+                      <div className="truncate text-xs text-gray-500">
+                        {item?.path || favorite.language}
+                      </div>
+                    </div>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={(e) => removeFavorite(favorite, e)}
+                          className="ml-2 h-6 w-6 flex-shrink-0 p-0 opacity-70 hover:opacity-100"
+                        >
+                          <X className="h-3 w-3" />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>Remove from favorites</TooltipContent>
+                    </Tooltip>
+                  </DropdownMenuItem>
+                );
+              })}
+            </div>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}

package/src/editor/menubar/ItemLanguageVersion.tsx

@@ -8,6 +8,7 @@ import { NavButtons } from "./NavButtons";
 import { getItemDescriptor } from "../utils";
 import { confirmCreateVersion } from "../utils/itemutils";
 import { ItemActionsMenu } from "./ItemActionsMenu";
+import { FavoritesControls } from "./FavoritesControls";
 
 export function ItemLanguageVersion() {
   const editContext = useEditContext();
@@ -66,8 +67,9 @@ export function ItemLanguageVersion() {
   return (
     <div className="flex items-center gap-3">
       <PageSelector itemDescriptor={item} />
-      <ItemActionsMenu isMobile={false} />
 
+      <ItemActionsMenu isMobile={false} />
+      <FavoritesControls itemDescriptor={item} editContext={editContext} />
       {languageSelector}
       {versionSelector}
 

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/contentService.ts

@@ -226,3 +226,15 @@ export async function exportItems(request: ExportItemsRequest) {
 export async function importItems(request: ImportItemsRequest) {
   return await post<ImportItemsResult>("/alpaca/editor/importItems", request);
 }
+
+export type RichTextProfileResponse = {
+  toolbars: Array<{
+    buttons: Array<{
+      name: string;
+    }>;
+  }>;
+};
+
+export async function getRichTextProfile(itemPath: string) {
+  return await post<RichTextProfileResponse>(`/alpaca/editor/RichTextProfile`, {profile: itemPath});
+}

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/ComponentTree.tsx

@@ -46,6 +46,14 @@ export function ComponentTree({}) {
 
   const treeRef = useRef<HTMLDivElement>(null);
 
+  // Helper function to clean placeholder labels by removing _{guid} pattern
+  function cleanPlaceholderLabel(label: string): string {
+    return label.replace(
+      /_{[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}}$/,
+      "",
+    );
+  }
+
   // Helper function to check if a component has editable descendants
   // function hasEditableDescendants(component: Component): boolean {
   //   if (!component.placeholders) return false;
@@ -148,10 +156,13 @@ export function ComponentTree({}) {
     p: Placeholder,
     parent: CustomTreeNode,
   ): CustomTreeNode {
+    const rawLabel = p.description || p.name;
+    const cleanedLabel = cleanPlaceholderLabel(rawLabel);
+
     const node: CustomTreeNode = {
       key: p.key,
       componentId: p.key,
-      label: p.description || p.name,
+      label: cleanedLabel,
       icon: "pi pi-folder",
       data: p,
       parent: parent,

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);