@alpaca-editor/core 1.0.4114 → 1.0.4120

package/src/editor/field-types/RawEditor.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { InputTextarea } from "primereact/inputtextarea";
+import { Textarea } from "../../components/ui/textarea";
 import { useEditContext } from "../client/editContext";
 import { useEffect, useRef, useState } from "react";
 import { useDebouncedCallback } from "use-debounce";
@@ -35,15 +35,14 @@ export function RawEditor({
   const fieldItem = field.descriptor.item;
 
   return (
-    <InputTextarea
+    <Textarea
       ref={inputRef}
       key={fieldItem.id + field.id + fieldItem.language + fieldItem.version}
       value={value || ""}
       disabled={readOnly}
-      className="focus-shadow bg-gray-5 p-2 text-xs"
-      style={{ width: "100%" }}
+      className="focus-shadow bg-gray-5 w-full p-2 text-xs"
       rows={12}
-      onChange={(e) => {
+      onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
         setValue(e.target.value);
         debouncedSetFieldvalue(e.target.value as string);
         // field.value = e.target.value;

package/src/editor/field-types/SingleLineText.tsx

@@ -1,16 +1,15 @@
 "use client";
 
-import { InputText } from "primereact/inputtext";
+import { Input } from "../../components/ui/input";
 import {
   useEditContext,
   useEditContextRef,
-  useFieldsEditContext,
   useFieldsEditContextRef,
   SelectionRange,
 } from "../client/editContext";
 import { useFieldModification } from "../client/fieldModificationStore";
 
-import { useEffect, useRef, useState, useMemo } from "react";
+import { useEffect, useRef, useState } from "react";
 import { RefreshCw } from "lucide-react";
 
 import { Field } from "../pageModel";
@@ -163,13 +162,12 @@ export function SingleLineText({
 
   return (
     <div className="relative">
-      <InputText
+      <Input
         ref={inputRef}
         key={fieldItem.id + field.id + fieldItem.language + fieldItem.version}
         value={value || ""}
         disabled={readOnly}
-        className="focus-shadow bg-gray-5 p-1.5 pr-7 text-xs"
-        style={{ width: "100%" }}
+        className="focus-shadow bg-gray-5 w-full p-1.5 pr-7 text-xs"
         onChange={handleChange}
         onSelect={handleSelect}
       />

package/src/editor/field-types/richtext/components/ReactSlate.tsx

@@ -47,7 +47,7 @@ import {
 import { normalizeUrl } from "../../../utils/urlUtils";
 
 import { useCachedSimplifiedProfile } from "../hooks/useProfileCache";
-import { classNames } from "primereact/utils";
+import { cn } from "../../../../lib/utils";
 
 // Memoized toolbar button component using useSlateSelector for performance
 const ToolbarButtonWrapper: React.FC<{
@@ -971,7 +971,7 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
           </div>
         )}
         <Editable
-          className={classNames(
+          className={cn(
             "border-gray-3 min-h-7 rounded-sm border p-1.5",
             readOnly ? "bg-gray-5" : "bg-gray-5",
             "focus-shadow",

package/src/editor/field-types/richtext/components/SimpleRichTextEditor.tsx

@@ -15,7 +15,7 @@ import {
   BlockId,
 } from "../types";
 import { SimpleToolbar } from "./SimpleToolbar";
-import { classNames } from "primereact/utils";
+import { cn } from "../../../../lib/utils";
 import "./SimpleRichTextEditor.css";
 
 interface SimpleRichTextEditorState {
@@ -481,7 +481,7 @@ export const SimpleRichTextEditor = forwardRef<HTMLDivElement, ReactSlateProps>(
         <div
           ref={editorRef}
           contentEditable={!readOnly}
-          className={classNames(
+          className={cn(
             "simple-editor-content",
             readOnly ? "bg-gray-5" : "bg-gray-5",
             "focus-shadow p-2",

package/src/editor/fieldTypes.ts

@@ -88,6 +88,7 @@ export type LinkValue = {
   targetItemName?: string;
   queryString?: string;
   targetItemId?: string;
+  text?: string;
 };
 
 export interface KeyValuePair {

package/src/editor/media-selector/AiImageSearch.tsx

@@ -5,14 +5,15 @@ import { createEditorAiContext } from "../ai/editorAiContext";
 import { executePrompt } from "../services/aiService";
 import { executeSearch } from "../services/searchService";
 import { useEditContext } from "../client/editContext";
-import { ProgressSpinner } from "primereact/progressspinner";
-import { InputText } from "primereact/inputtext";
+import { Loader2 } from "lucide-react";
+import { Input } from "../../components/ui/input";
 import { Thumbnail } from "../services/contentService";
 import { Thumbnails } from "./Thumbnails";
 import { Splitter, SplitterPanel } from "primereact/splitter";
 import { Preview } from "./Preview";
 import DialogButtons from "../ui/DialogButtons";
-import { Button } from "primereact/button";
+import { Button } from "../../components/ui/button";
+import { Sparkles } from "lucide-react";
 import { toast } from "sonner";
 
 export function AiImageSearch({
@@ -125,7 +126,7 @@ export function AiImageSearch({
             <div>
               Search prompt
               <div className="flex items-center gap-2">
-                <InputText
+                <Input
                   ref={inputRef} // Add ref to InputText
                   value={prompt}
                   onChange={onPromptChange}
@@ -133,25 +134,21 @@ export function AiImageSearch({
                 />
                 {loadingPrompt && (
                   <div className="flex h-10 items-center">
-                    <ProgressSpinner
-                      style={{ width: "24px", height: "24px" }}
-                    />
+                    <Loader2 className="h-6 w-6 animate-spin" />
                   </div>
                 )}
                 {!loadingPrompt && (
-                  <Button
-                    icon="pi pi-sparkles"
-                    onClick={() => suggestPrompt()}
-                    label="Suggest"
-                    size="small"
-                  />
+                  <Button onClick={() => suggestPrompt()} size="sm">
+                    <Sparkles className="mr-2 h-4 w-4" />
+                    Suggest
+                  </Button>
                 )}
               </div>
             </div>
             <div className="relative flex-1">
               {loadingThumbnails && (
                 <div className="flex h-full items-center">
-                  <ProgressSpinner style={{ width: "24px", height: "24px" }} />
+                  <Loader2 className="h-6 w-6 animate-spin" />
                 </div>
               )}
               <Thumbnails

package/src/editor/media-selector/MediaFolderBrowser.tsx

@@ -1,7 +1,14 @@
 import { useEffect, useState } from "react";
-import { classNames } from "primereact/utils";
-import { Button } from "primereact/button";
-import { ProgressSpinner } from "primereact/progressspinner";
+import { cn } from "../../lib/utils";
+import { Button } from "../../components/ui/button";
+import {
+  Grid3X3,
+  Square,
+  List,
+  Upload,
+  RefreshCw,
+  Loader2,
+} from "lucide-react";
 import { useEditContext } from "../client/editContext";
 import { getChildren } from "../services/contentService";
 import { Thumbnail } from "../services/contentService";
@@ -114,7 +121,7 @@ export function MediaFolderBrowser({
       {images.map((t) => (
         <div
           key={t.id}
-          className={classNames(
+          className={cn(
             selectedImage?.id === t.id
               ? "shadow-lg ring-2 ring-blue-500"
               : "shadow-sm hover:shadow-md",
@@ -149,7 +156,7 @@ export function MediaFolderBrowser({
       {images.map((t) => (
         <div
           key={t.id}
-          className={classNames(
+          className={cn(
             selectedImage?.id === t.id
               ? "shadow-lg ring-2 ring-blue-500"
               : "shadow-sm hover:shadow-md",
@@ -179,7 +186,7 @@ export function MediaFolderBrowser({
       {images.map((t) => (
         <div
           key={t.id}
-          className={classNames(
+          className={cn(
             selectedImage?.id === t.id
               ? "border-blue-300 bg-blue-100"
               : "bg-white hover:bg-gray-50",
@@ -209,7 +216,7 @@ export function MediaFolderBrowser({
     if (loading) {
       return (
         <div className="flex h-64 items-center justify-center">
-          <ProgressSpinner style={{ width: "32px", height: "32px" }} />
+          <Loader2 className="h-8 w-8 animate-spin" />
         </div>
       );
     }
@@ -245,49 +252,49 @@ export function MediaFolderBrowser({
         </div>
         <div className="flex gap-1">
           <Button
-            icon="pi pi-th-large"
-            size="small"
-            outlined={viewMode === "grid"}
+            size="sm"
+            variant={viewMode === "grid" ? "outline" : "default"}
             onClick={() => setViewMode("grid")}
-            tooltip="Grid View"
-            tooltipOptions={{ position: "bottom" }}
+            title="Grid View"
             className="p-1"
-          />
+          >
+            <Grid3X3 className="h-4 w-4" />
+          </Button>
           <Button
-            icon="pi pi-stop"
-            size="small"
-            outlined={viewMode === "large-grid"}
+            size="sm"
+            variant={viewMode === "large-grid" ? "outline" : "default"}
             onClick={() => setViewMode("large-grid")}
-            tooltip="Large Grid View"
-            tooltipOptions={{ position: "bottom" }}
+            title="Large Grid View"
             className="p-1"
-          />
+          >
+            <Square className="h-4 w-4" />
+          </Button>
           <Button
-            icon="pi pi-list"
-            size="small"
-            outlined={viewMode === "list"}
+            size="sm"
+            variant={viewMode === "list" ? "outline" : "default"}
             onClick={() => setViewMode("list")}
-            tooltip="List View"
-            tooltipOptions={{ position: "bottom" }}
+            title="List View"
             className="p-1"
-          />
+          >
+            <List className="h-4 w-4" />
+          </Button>
           <Button
-            icon="pi pi-upload"
-            size="small"
+            size="sm"
             onClick={handleUpload}
             disabled={uploading || !folderId}
-            tooltip="Upload Files"
-            tooltipOptions={{ position: "bottom" }}
+            title="Upload Files"
             className="ml-2 p-1"
-          />
+          >
+            <Upload className="h-4 w-4" />
+          </Button>
           <Button
-            icon="pi pi-refresh"
-            size="small"
+            size="sm"
             onClick={loadMediaFiles}
-            tooltip="Refresh"
-            tooltipOptions={{ position: "bottom" }}
+            title="Refresh"
             className="ml-1 p-1"
-          />
+          >
+            <RefreshCw className="h-4 w-4" />
+          </Button>
         </div>
       </div>
 

package/src/editor/media-selector/Thumbnails.tsx

@@ -1,4 +1,4 @@
-import { classNames } from "primereact/utils";
+import { cn } from "../../lib/utils";
 import { Thumbnail } from "../services/contentService";
 import { Check } from "lucide-react";
 
@@ -16,7 +16,7 @@ export function Thumbnails({
   onHide: () => void;
 }) {
   return (
-    <div 
+    <div
       data-testid="media-selector-thumbnails-container"
       className="absolute inset-0 flex flex-col overflow-auto p-2"
     >
@@ -24,7 +24,7 @@ export function Thumbnails({
         {images?.map((t) => (
           <div
             key={t.id}
-            className={classNames(
+            className={cn(
               selectedImage?.id == t.id ? "border-theme-secondary" : "",
               "hover:border-theme-secondary relative flex h-[160px] w-[160px] cursor-pointer flex-col items-center justify-center rounded-md border p-2",
             )}

package/src/editor/media-selector/TreeSelector.tsx

@@ -17,7 +17,7 @@ import { Preview } from "./Preview";
 import { UploadZone } from "./UploadZone";
 import { AiImageSearchPrompt } from "./AiImageSearchPrompt";
 import { useDebouncedCallback } from "use-debounce";
-import { ProgressSpinner } from "primereact/progressspinner";
+import { Loader2 } from "lucide-react";
 import {
   Popover,
   PopoverTrigger,
@@ -277,7 +277,7 @@ export const TreeSelector = ({
             <div className="relative flex-1">
               {loadingThumbnails && (
                 <div className="flex h-full items-center">
-                  <ProgressSpinner style={{ width: "24px", height: "24px" }} />
+                  <Loader2 className="h-6 w-6 animate-spin" />
                 </div>
               )}
               {!loadingThumbnails && (

package/src/editor/media-selector/UploadZone.tsx

@@ -1,4 +1,4 @@
-import { classNames } from "primereact/utils";
+import { cn } from "../../lib/utils";
 import { useCallback, useRef } from "react";
 
 import { useState } from "react";
@@ -95,7 +95,7 @@ export function UploadZone({
     <>
       <div
         ref={dragZoneRef}
-        className={classNames(
+        className={cn(
           "mx-6 my-4 flex flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed p-4",
           isDragging
             ? "border-blue-400 bg-blue-50"

package/src/editor/menubar/NavButtons.tsx

@@ -1,5 +1,5 @@
 import { useEditContext } from "../client/editContext";
-import { classNames } from "primereact/utils";
+import { cn } from "../../lib/utils";
 
 export function NavButtons() {
   const editContext = useEditContext();
@@ -11,21 +11,19 @@ export function NavButtons() {
   const history = editContext.browseHistory;
 
   const currentIndex = history.findIndex(
-    (x) => x.id === item.id && x.language === item.language
+    (x) => x.id === item.id && x.language === item.language,
   );
   return (
     <>
       <div
         key="nav-fwd"
-        className={classNames(
-          currentIndex < history.length - 1
-            ? " text-gray-200"
-            : "text-gray-400",
-          "cursor-pointer hover:bg-gray-500 flex gap-2 p-2 rounded-md "
+        className={cn(
+          currentIndex < history.length - 1 ? "text-gray-200" : "text-gray-400",
+          "flex cursor-pointer gap-2 rounded-md p-2 hover:bg-gray-500",
         )}
         onClick={() => {
           const currentIndex = history.findIndex(
-            (x) => x.id === item.id && x.language === item.language
+            (x) => x.id === item.id && x.language === item.language,
           );
           if (currentIndex < history.length - 1) {
             const historyItem = history[currentIndex + 1];
@@ -36,7 +34,7 @@ export function NavButtons() {
                 language: historyItem.language,
                 version: historyItem.version || 0,
               },
-              { addToBrowseHistory: false }
+              { addToBrowseHistory: false },
             );
           }
         }}
@@ -45,13 +43,13 @@ export function NavButtons() {
       </div>
       <div
         key="nav-back"
-        className={classNames(
-          currentIndex > 0 ? " text-gray-200" : "text-gray-400",
-          "cursor-pointer hover:bg-gray-500 flex gap-2 p-2 rounded-md "
+        className={cn(
+          currentIndex > 0 ? "text-gray-200" : "text-gray-400",
+          "flex cursor-pointer gap-2 rounded-md p-2 hover:bg-gray-500",
         )}
         onClick={() => {
           const currentIndex = history.findIndex(
-            (x) => x.id === item.id && x.language === item.language
+            (x) => x.id === item.id && x.language === item.language,
           );
           if (currentIndex > 0) {
             const historyItem = history[currentIndex - 1];
@@ -62,7 +60,7 @@ export function NavButtons() {
                 language: historyItem.language,
                 version: historyItem.version || 0,
               },
-              { addToBrowseHistory: false }
+              { addToBrowseHistory: false },
             );
           }
         }}

package/src/editor/menubar/Separator.tsx

@@ -1,9 +1,9 @@
-import { classNames } from "primereact/utils";
+import { cn } from "../../lib/utils";
 
 export function Separator({ size }: { size?: "large" | "small" }) {
   return (
     <div
-      className={classNames(
+      className={cn(
         "border-r border-gray-400",
         size === "large" ? "mx-3 h-7" : "mx-1 h-4",
       )}

package/src/editor/menubar/SiteInfo.tsx

@@ -1,13 +1,17 @@
-import { OverlayPanel } from "primereact/overlaypanel";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../components/ui/popover";
 import { useEditContext } from "../client/editContext";
-import { useRef, useState } from "react";
+import { useState } from "react";
 import { getSites } from "../services/contentService";
 import { Site } from "../../types";
-import { ProgressSpinner } from "primereact/progressspinner";
+import { Loader2, Globe } from "lucide-react";
 
 export function SiteInfo() {
   const editContext = useEditContext();
-  const overlaypanel = useRef<OverlayPanel>(null);
+  const [isOpen, setIsOpen] = useState(false);
   const [sites, setSites] = useState<Site[]>();
   if (!editContext) return null;
 
@@ -17,27 +21,29 @@ export function SiteInfo() {
   };
 
   return (
-    <div
-      className="my-2 flex gap-2 items-center text-gray-200 cursor-pointer"
-      title={editContext.pageView.site?.name}
-      onClick={async (ev) => {
-        setSites(undefined);
-        overlaypanel.current!.toggle(ev);
-        await loadSites();
-      }}
-    >
-      <i className="pi pi-globe text-lg" />
-      <OverlayPanel dismissable={true} ref={overlaypanel} closeOnEscape>
-        <div className="max-h-[45vh] min-w-20 flex flex-col overflow-hidden text-xs">
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>
+        <div
+          className="my-2 flex cursor-pointer items-center gap-2 text-gray-200"
+          title={editContext.pageView.site?.name}
+          onClick={async () => {
+            setSites(undefined);
+            setIsOpen(true);
+            await loadSites();
+          }}
+        >
+          <Globe className="h-4 w-4" />
+        </div>
+      </PopoverTrigger>
+      <PopoverContent className="w-80">
+        <div className="flex max-h-[45vh] min-w-20 flex-col overflow-hidden text-xs">
           <div className="p-4">
             This page is part of the site:{" "}
-            <span className="font-bold">
-              {editContext.pageView.site?.name}
-            </span>
-            {!sites && <ProgressSpinner className="w-5 h-5" />}
+            <span className="font-bold">{editContext.pageView.site?.name}</span>
+            {!sites && <Loader2 className="h-5 w-5 animate-spin" />}
             {sites && (
               <div>
-                <div className="border-b my-2">Sites registered:</div>
+                <div className="my-2 border-b">Sites registered:</div>
                 <ul>
                   {sites.map((site) => (
                     <li key={site.name}>{site.name}</li>
@@ -47,7 +53,7 @@ export function SiteInfo() {
             )}
           </div>
         </div>
-      </OverlayPanel>
-    </div>
+      </PopoverContent>
+    </Popover>
   );
 }

package/src/editor/page-editor-chrome/CommentHighlighting.tsx

@@ -3,7 +3,7 @@ import { findComponentRect, findFieldElement } from "../utils";
 import { Comment } from "../../types";
 import { useState } from "react";
 import { useEffect } from "react";
-import { classNames } from "primereact/utils";
+import { cn } from "../../lib/utils";
 import { CommentIcon } from "../ui/Icons";
 import { CommentDisplayPopover } from "../reviews/CommentDisplayPopover";
 
@@ -182,7 +182,7 @@ export function CommentHighlighting({
               }}
             >
               <div
-                className={classNames(
+                className={cn(
                   "pointer-events-auto absolute h-5 w-5 cursor-pointer",
                   rect.top * scale < 18 ? "top-0" : "top-[-18px]",
                   (rect.left + rect.width) * scale > iframeRect.width - 18

package/src/editor/page-editor-chrome/FieldActionIndicator.tsx

@@ -1,4 +1,4 @@
-import { ProgressSpinner } from "primereact/progressspinner";
+import { Loader2 } from "lucide-react";
 import type { FieldAction } from "../client/EditorShell";
 import { useEditContext } from "../client/editContext";
 import { AlertCircle } from "lucide-react";
@@ -59,7 +59,7 @@ function SingleIndicator({
       {isRunning && (
         <div className="text-theme-secondary rounded-mdp-3 bg-theme-secondary-light border-theme-secondary text-3xs pointer-events-none absolute top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center gap-1.5 rounded border p-1 font-bold">
           <div className="flex items-center gap-1">
-            <ProgressSpinner style={{ width: "1rem", height: "1rem" }} />
+            <Loader2 className="h-4 w-4 animate-spin" />
             {action.label}
           </div>
           {action.message && <div className="text-3xs">{action.message}</div>}

package/src/editor/page-editor-chrome/FrameMenu.tsx

@@ -211,7 +211,12 @@ export function FrameMenu({
     if (!component?.datasourceItem) return;
     // For multi-select, show a custom drag image indicating the number of items
     const selectedCount = editContext?.selection?.length || 0;
-    if (selectedCount > 1) setMultiDragImage(event, selectedCount);
+    if (selectedCount > 1)
+      setMultiDragImage(event, selectedCount, "components");
+    // Allow both copy and move from component drag origins
+    try {
+      event.dataTransfer.effectAllowed = "copyMove";
+    } catch {}
     event.dataTransfer.setData("componentId", component.id);
     setTimeout(() => {
       if (!component?.datasourceItem) return;

package/src/editor/page-editor-chrome/PictureEditorOverlay.tsx

@@ -4,6 +4,9 @@ import { useEditContext } from "../client/editContext";
 import { PictureEditor } from "../PictureEditor";
 import { getComponentById } from "../componentTreeHelper";
 import { PictureField } from "../fieldTypes";
+import { showComponentContextMenu } from "../ContextMenu";
+import { loadFieldButtons } from "../services/editService";
+import { Component } from "../pageModel";
 
 export function PictureEditorOverlay() {
   const editContext = useEditContext();
@@ -147,6 +150,49 @@ export function PictureEditorOverlay() {
       style={style}
       forwardScrollevents={true}
       isPageEditor={true}
+      onContextMenu={async (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!editContext?.pageView?.page) return;
+
+        // Focus the picture field so Add Comment associates with it
+        try {
+          await editContext.setFocusedField(field.descriptor, false);
+        } catch {}
+
+        // Determine target components: prefer current selection, fallback to hovered element's component
+        const selectedComponents: Component[] = (editContext.selection || [])
+          .map((id) => getComponentById(id, editContext.pageView!.page!))
+          .filter((x) => x) as Component[];
+
+        const targetComponents = selectedComponents.length
+          ? selectedComponents
+          : (() => {
+              const itemId = element?.getAttribute("data-itemid");
+              if (!itemId) return [] as Component[];
+              const comp = getComponentById(
+                itemId,
+                editContext.pageView!.page!,
+              );
+              return comp ? [comp] : [];
+            })();
+
+        if (
+          editContext.showLayoutComponents === false &&
+          targetComponents.some((c) => c.layoutId)
+        ) {
+          return;
+        }
+
+        const fieldButtons = await loadFieldButtons(field.descriptor);
+        const showMenu = await showComponentContextMenu(
+          targetComponents,
+          editContext,
+          field.descriptor,
+          fieldButtons,
+        );
+        if (showMenu) showMenu(e);
+      }}
     />
   );
 }

package/src/editor/page-editor-chrome/PlaceholderDropZone.tsx

@@ -113,9 +113,14 @@ export function PlaceholderDropZone({
         onDrop={drop}
         onDragLeave={() => setIsHovering(false)}
         onClick={(e) => {
+          // Prevent the initiating click from bubbling to the window-level
+          // context menu close handlers, which would immediately close the menu
+          // after opening it.
+          e.stopPropagation();
           // Quick-insert on Ctrl+Click: add a component of the provided type immediately
           if ((e as any).ctrlKey && typeIdOnCtrlClick) {
             e.preventDefault();
+            e.stopPropagation();
             const sameTypeOption = placeholder.insertOptions?.find(
               (x) =>
                 x.typeId === typeIdOnCtrlClick && !x.isHidden && !x.isInvalid,
@@ -188,7 +193,7 @@ export function PlaceholderDropZone({
                 label: insertMenuTitle || "Insert",
                 disabled: true,
                 className:
-                  "bg-gray-100 text-gray-900 font-medium  py-1.5 text-sm",
+                  "bg-gray-50 text-dark font-medium py-1.5 text-xs border-b border-gray-3",
               },
               ...insertOptions,
             ]);