@alpaca-editor/core 1.0.4000 → 1.0.4007

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

@@ -2,7 +2,6 @@ import { Splitter, SplitterPanel } from "primereact/splitter";
 import { useEditContext } from "../client/editContext";
 import { useEffect, useState } from "react";
 
-import { ListBox } from "primereact/listbox";
 import { ReferencedItem, TreeListField } from "../fieldTypes";
 import { getLookupSources } from "../services/editService";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
@@ -39,6 +38,7 @@ export default function TreeListEditor({
   const [values, setValues] = useState<ReferencedItem[]>([]);
   const [hoveredItemId, setHoveredItemId] = useState<string | undefined>();
   const [hoveredItem, setHoveredItem] = useState<FullItem | undefined>();
+  const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
 
   if (!editContext) return;
 
@@ -147,9 +147,49 @@ export default function TreeListEditor({
     });
   }
 
+  const handleDragStart = (event: React.DragEvent, index: number) => {
+    event.dataTransfer.setData("text/plain", index.toString());
+    event.dataTransfer.effectAllowed = "move";
+    setDraggedIndex(index);
+  };
+
+  const handleDragOver = (event: React.DragEvent) => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "move";
+  };
+
+  const handleDrop = async (event: React.DragEvent, dropIndex: number) => {
+    event.preventDefault();
+    const dragIndex = parseInt(event.dataTransfer.getData("text/plain"));
+
+    if (dragIndex === dropIndex) {
+      setDraggedIndex(null);
+      return;
+    }
+
+    const newValues = [...values];
+    const [draggedItem] = newValues.splice(dragIndex, 1);
+    if (!draggedItem) return;
+    newValues.splice(dropIndex, 0, draggedItem);
+
+    setValues(newValues);
+    setDraggedIndex(null);
+
+    await editContext?.operations.editField({
+      field: field.descriptor,
+      value: newValues,
+      rawValue: newValues.map((x) => normalizeGuid(x.id)).join("|"),
+      refresh: "waitForQuietPeriod",
+    });
+  };
+
+  const handleDragEnd = () => {
+    setDraggedIndex(null);
+  };
+
   return (
     <div className="focus-shadow border border-gray-200">
-      <div className="mb-1 border-b border-gray-200 bg-white p-2">
+      <div className="bg-gray-5 mb-1 border-b border-gray-200 p-2">
         <ItemSearch
           rootItemIds={rootItemIds.map((x) => normalizeGuid(x))}
           itemSelected={async (item) => {
@@ -208,56 +248,102 @@ export default function TreeListEditor({
                 />
               </div>
               <div className="relative h-full flex-1">
-                <ListBox
-                  className="absolute inset-0 overflow-auto text-xs"
-                  options={values}
-                  optionLabel="path"
-                  metaKeySelection={true}
-                  emptyMessage={"None selected"}
-                  multiple={true}
-                  value={selectedFromList}
-                  onChange={(e) => setSelectedFromList(e.value)}
-                  itemTemplate={(option) => (
-                    <div
-                      className="group relative flex items-center gap-1.5 select-none hover:bg-gray-50"
-                      onMouseEnter={async () => {
-                        setHoveredItemId(option.id);
-                        // setExpandIdPath(option.idPath || "");
-                        setSelectedItemNodesInTree([option]);
-                      }}
-                      onDoubleClick={() => {
-                        if (!readOnly) removeFromList([option]);
-                      }}
-                    >
-                      <img src={option.icon} className="h-4 w-4" />
-                      {trimPath(option.path)}{" "}
-                      {activeOpenButtonId === option.id ? (
-                        <Button
-                          className="h-4 p-1"
-                          size="sm"
-                          onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
-                            e.stopPropagation();
-                            editContext.loadItem(option.id);
-                            setActiveOpenButtonId("");
-                          }}
-                        >
-                          Open
-                        </Button>
-                      ) : (
-                        <button
-                          className="cursor-pointer opacity-0 transition-opacity group-hover:opacity-100"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            setActiveOpenButtonId(option.id);
-                          }}
-                          title="Open"
-                        >
-                          <i className="pi pi-arrow-up-right text-xs text-gray-500" />
-                        </button>
-                      )}
+                <div className="absolute inset-0 overflow-auto border border-gray-300 bg-white text-xs">
+                  {values.length === 0 ? (
+                    <div className="p-3 text-center text-gray-500">
+                      None selected
                     </div>
+                  ) : (
+                    values.map((option, index) => (
+                      <div
+                        key={option.id}
+                        draggable={!readOnly}
+                        onDragStart={(e) => handleDragStart(e, index)}
+                        onDragOver={handleDragOver}
+                        onDrop={(e) => handleDrop(e, index)}
+                        onDragEnd={handleDragEnd}
+                        className={`group relative flex cursor-pointer items-center gap-1.5 border-b border-gray-100 p-1 select-none last:border-b-0 hover:bg-gray-50 ${
+                          selectedFromList.includes(option) ? "bg-blue-100" : ""
+                        } ${draggedIndex === index ? "opacity-50" : ""} ${
+                          !readOnly ? "cursor-move" : ""
+                        }`}
+                        onClick={(e) => {
+                          if (e.ctrlKey) {
+                            // Multi-select mode when Ctrl is pressed
+                            if (selectedFromList.includes(option)) {
+                              setSelectedFromList(
+                                selectedFromList.filter(
+                                  (item) => item.id !== option.id,
+                                ),
+                              );
+                            } else {
+                              setSelectedFromList([
+                                ...selectedFromList,
+                                option,
+                              ]);
+                            }
+                          } else {
+                            // Single-select mode when Ctrl is not pressed
+                            if (
+                              selectedFromList.length === 1 &&
+                              selectedFromList.includes(option)
+                            ) {
+                              // Deselect if this is the only selected item
+                              setSelectedFromList([]);
+                            } else {
+                              // Replace selection with just this item
+                              setSelectedFromList([option]);
+                            }
+                          }
+                        }}
+                        onMouseEnter={async () => {
+                          setHoveredItemId(option.id);
+                          setSelectedItemNodesInTree([
+                            {
+                              id: option.id,
+                              path: option.path,
+                              name: option.name,
+                              icon: option.icon,
+                              idPath: option.idPath || "",
+                            },
+                          ]);
+                        }}
+                        onDoubleClick={() => {
+                          if (!readOnly) removeFromList([option]);
+                        }}
+                      >
+                        <img src={option.icon} className="h-4 w-4" />
+                        {trimPath(option.path)}{" "}
+                        {activeOpenButtonId === option.id ? (
+                          <Button
+                            className="h-4 p-1"
+                            size="sm"
+                            onClick={(
+                              e: React.MouseEvent<HTMLButtonElement>,
+                            ) => {
+                              e.stopPropagation();
+                              editContext.loadItem(option.id);
+                              setActiveOpenButtonId("");
+                            }}
+                          >
+                            Open
+                          </Button>
+                        ) : (
+                          <button
+                            className="cursor-pointer opacity-0 transition-opacity group-hover:opacity-100"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setActiveOpenButtonId(option.id);
+                            }}
+                            title="Open"
+                          >
+                            <i className="pi pi-arrow-up-right text-xs text-gray-500" />
+                          </button>
+                        )}
+                      </div>
+                    ))
                   )}
-                />
+                </div>
               </div>
             </div>
           </div>

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

@@ -724,6 +724,11 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
           )}
           readOnly={readOnly}
           placeholder={placeholder}
+          renderPlaceholder={({ attributes, children }) => (
+            <span {...attributes} className="p-2 text-gray-500">
+              {children}
+            </span>
+          )}
           onFocus={onFocus}
           onBlur={onBlur}
           onKeyDown={handleKeyDown}

package/src/editor/fieldTypes.ts

@@ -124,7 +124,7 @@ export type DateField = Field & {
   value: DateFieldValue;
 };
 
-export type DateFieldValue = Field & {
+export type DateFieldValue = {
   date: string;
 };
 

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

@@ -70,7 +70,8 @@ export function AiImageSearch({
         );
 
         setLoadingPrompt(false);
-        const newPrompt = result.responseText.replaceAll("\n", "");
+        const lastMessage = result?.messages?.[result.messages.length - 1];
+        const newPrompt = lastMessage?.content?.replaceAll("\n", "") || "";
         setPrompt(newPrompt);
       } catch (error) {
         if (error instanceof Error && error.name !== "AbortError") {

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

@@ -53,7 +53,8 @@ export function AiImageSearchPrompt({
         );
 
         setLoadingPrompt(false);
-        const newPrompt = result.responseText.replaceAll("\n", "");
+        const lastMessage = result?.messages?.[result.messages.length - 1];
+        const newPrompt = lastMessage?.content?.replaceAll("\n", "") || "";
         setPrompt(newPrompt);
       } catch (error) {
         if (error instanceof Error && error.name !== "AbortError") {

package/src/editor/page-viewer/DeviceToolbar.tsx

@@ -5,6 +5,7 @@ import { RotateDeviceIcon } from "../ui/Icons";
 import { useDebouncedCallback } from "use-debounce";
 import { PageViewContext } from "./pageViewContext";
 import { EditorConfiguration } from "../../config/types";
+import { cn } from "../../lib/utils";
 
 export function DeviceToolbar({
   pageViewContext,
@@ -17,17 +18,17 @@ export function DeviceToolbar({
     (width: number | undefined) => {
       pageViewContext.setDeviceWidth(width);
     },
-    400
+    400,
   );
   const debouncedSetDeviceHeight = useDebouncedCallback(
     (height: number | undefined) => {
       pageViewContext.setDeviceHeight(height);
     },
-    400
+    400,
   );
 
   return (
-    <div className="flex justify-center w-full items-center bg-gray-100 p-1 z-1000 text-sm gap-2 border-b">
+    <div className="bg-gray-4 z-1000 mb-2 flex w-full items-center justify-center gap-2 text-sm">
       <Dropdown
         options={configuration.devices.map((x) => ({
           label: x.name,
@@ -53,6 +54,7 @@ export function DeviceToolbar({
       />
       <SimpleIconButton
         icon="pi pi-lock"
+        className="hover:bg-gray-3"
         selected={pageViewContext.lockHeight || false}
         onClick={() =>
           pageViewContext.setLockHeight(!pageViewContext.lockHeight)
@@ -60,10 +62,20 @@ export function DeviceToolbar({
         label="Lock Height"
       />
       <SimpleIconButton
-        icon={<RotateDeviceIcon className="w-4 h-4" />}
+        className="hover:bg-gray-3"
+        icon={
+          <RotateDeviceIcon
+            className={cn(
+              "h-4 w-4 transition-transform duration-300",
+              pageViewContext.rotate ? "rotate-90" : "",
+            )}
+          />
+        }
         selected={pageViewContext.rotate || false}
         onClick={() => pageViewContext.setRotate(!pageViewContext.rotate)}
-        label="Rotate"
+        label={
+          pageViewContext.rotate ? "Switch to Portrait" : "Switch to Landscape"
+        }
       />
     </div>
   );

package/src/editor/page-viewer/MiniMap.tsx

@@ -123,9 +123,14 @@ export function MiniMap({
     }
 
     if (correspondingNode && originalNode) {
-      if (originalNode.tagName === "HEAD")
+      if (originalNode.tagName === "HEAD") {
         correspondingNode.innerHTML = originalNode.innerHTML;
-      else {
+      } else if (
+        correspondingNode.parentNode?.nodeType === Node.DOCUMENT_NODE
+      ) {
+        // Can't use outerHTML when parent is the document node
+        correspondingNode.innerHTML = originalNode.innerHTML;
+      } else {
         correspondingNode.outerHTML = originalNode.outerHTML;
       }
     }

package/src/editor/services/aiService.ts

@@ -34,6 +34,15 @@ type Message = {
   role: string;
 };
 
+export interface ExecutePromptResponse {
+  editOperations: any[];
+  messages: Message[];
+  numInputTokens: number;
+  numOutputTokens: number;
+  numCachedTokens: number;
+  state: string;
+}
+
 export async function executePrompt(
   messages: Message[],
   editContext: EditContextType,
@@ -48,7 +57,7 @@ export async function executePrompt(
   options?: RequestInit,
   model?: string,
   callback?: (response: any) => void,
-): Promise<any> {
+): Promise<ExecutePromptResponse | null> {
   const context = createAiContext({ editContext });
 
   const response = await fetch(context.endpoint, {

package/src/editor/sidebar/Insert.tsx

@@ -16,7 +16,7 @@ export function Insert() {
       content: (
         <div className="relative flex-1">
           <div className="absolute inset-0 overflow-auto">
-            <MainContentTree mode="insert" />
+            <MainContentTree mode="insert-component" />
           </div>
         </div>
       ),

package/src/editor/sidebar/MainContentTree.tsx

@@ -10,7 +10,7 @@ export function MainContentTree({
   mode,
   rootItemId,
 }: {
-  mode: "insert" | "normal" | "select-page";
+  mode: "insert-component" | "normal" | "select-page";
   rootItemId?: string;
 }) {
   const editContext = useEditContext();
@@ -22,17 +22,28 @@ export function MainContentTree({
   const [selectedItemIds, setSelectedItemIds] = useState<string[]>([]);
 
   const isDraggable = useCallback(
-    (x: ItemTreeNodeData) => {
-      return (
-        mode === "insert" &&
-        insertOptions?.find(
-          (insertOption: InsertOption) =>
-            insertOption.typeId == x.templateId ||
-            insertOption.compatibleTypeIds?.find(
-              (compatibleTemplate) => compatibleTemplate == x.templateId,
-            ) !== undefined,
-        ) !== undefined
-      );
+    (item: ItemTreeNodeData) => {
+      // Only allow dragging in insert-component mode
+      if (mode !== "insert-component") {
+        return true;
+      }
+
+      if (!insertOptions) return false;
+
+      // Check if the item's template is compatible with any insert option
+      return insertOptions.some((insertOption) => {
+        // Direct type match
+        if (insertOption.typeId === item.templateId) {
+          return true;
+        }
+
+        // Compatible type match
+        return (
+          insertOption.compatibleTypeIds?.some(
+            (compatibleTypeId) => compatibleTypeId === item.templateId,
+          ) ?? false
+        );
+      });
     },
     [mode, insertOptions],
   );
@@ -76,10 +87,10 @@ export function MainContentTree({
             scrollToSelected={true}
             className="h-full"
             selectPagesOnly={mode === "select-page"}
-            selectionMode={mode == "insert" ? "none" : "multiple"}
+            selectionMode={mode == "insert-component" ? "none" : "multiple"}
             selectedItemIds={selectedItemIds}
             onSelectionChange={(selection) => {
-              if (mode === "insert") return;
+              if (mode === "insert-component") return;
               const selectedItems = selection as ItemTreeNodeData[];
               setSelectedItemIds(selectedItems.map((x) => x.id));
               if (selectedItems.length > 0 && selectedItems[0])
@@ -89,6 +100,7 @@ export function MainContentTree({
                   version: selectedItems[0].version,
                 });
             }}
+            showGrabCursorForDraggableNodes={mode === "insert-component"}
             isDraggable={isDraggable}
             renderNode={(node, defaultRenderer) => (
               <div className="group flex w-full gap-4">

package/src/editor/ui/Icons.tsx

@@ -393,14 +393,25 @@ export function FormEditIcon({ className }: { className?: string }) {
 export function RotateDeviceIcon({ className }: { className?: string }) {
   return (
     <svg
-      viewBox="0 0 24 24"
+      width="16"
+      height="18"
+      viewBox="0 0 16 18"
+      fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={className}
-      stroke="currentColor"
-      fill="currentColor"
     >
-      <path d="M21.323 8.616l-4.94-4.94a1.251 1.251 0 0 0-1.767 0l-10.94 10.94a1.251 1.251 0 0 0 0 1.768l4.94 4.94a1.25 1.25 0 0 0 1.768 0l10.94-10.94a1.251 1.251 0 0 0 0-1.768zM14 5.707L19.293 11 11.5 18.793 6.207 13.5zm-4.323 14.91a.25.25 0 0 1-.354 0l-1.47-1.47.5-.5-2-2-.5.5-1.47-1.47a.25.25 0 0 1 0-.354L5.5 14.207l5.293 5.293zm10.94-10.94l-.617.616L14.707 5l.616-.616a.25.25 0 0 1 .354 0l4.94 4.94a.25.25 0 0 1 0 .353zm1.394 6.265V18a3.003 3.003 0 0 1-3 3h-3.292l1.635 1.634-.707.707-2.848-2.847 2.848-2.848.707.707L15.707 20h3.304a2.002 2.002 0 0 0 2-2v-2.058zM4 9H3V7a3.003 3.003 0 0 1 3-3h3.293L7.646 2.354l.707-.707 2.848 2.847L8.354 7.34l-.707-.707L9.28 5H6a2.002 2.002 0 0 0-2 2z" />
-      <path fill="none" d="M0 0h24v24H0z" />
+      <path
+        d="M10.24 9C10.8561 9 11.1641 9 11.3994 9.12456C11.6064 9.23413 11.7746 9.40897 11.8801 9.62401C12 9.86848 12 10.1885 12 10.8286L12 15.1714C12 15.8115 12 16.1315 11.8801 16.376C11.7746 16.591 11.6064 16.7659 11.3994 16.8754C11.1641 17 10.8561 17 10.24 17L2.76 17C2.14394 17 1.83591 17 1.60061 16.8754C1.39363 16.7659 1.22535 16.591 1.11989 16.376C0.999999 16.1315 0.999999 15.8115 0.999999 15.1714L1 10.8286C1 10.1885 1 9.86848 1.11989 9.62401C1.22535 9.40897 1.39363 9.23413 1.60061 9.12456C1.83591 9 2.14394 9 2.76 9L10.24 9Z"
+        stroke="#111111"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M15 11L15 9.11111C15 7.24427 15 6.31085 14.6321 5.59781C14.3086 4.9706 13.7923 4.46067 13.1572 4.14109C12.4353 3.77778 11.4902 3.77778 9.6 3.77778L6 3.77778M6 3.77778L8.8125 6.55556M6 3.77778L8.8125 1"
+        stroke="#111111"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </svg>
   );
 }

package/src/editor/ui/ItemNameDialogNew.tsx

@@ -1,4 +1,9 @@
-import { Dialog } from "primereact/dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "../../components/ui/dialog";
 
 import { useEffect, useRef, useState } from "react";
 import DialogButtons from "./DialogButtons";
@@ -32,6 +37,12 @@ export function ItemNameDialog(
     setName(props?.name || "");
   }, [props]);
 
+  // Focus and select the input when dialog opens
+  useEffect(() => {
+    nameRef.current?.focus();
+    nameRef.current?.select();
+  }, []);
+
   const checkNameValidDebounced = useDebouncedCallback(
     async () => checkName(),
     500,
@@ -81,38 +92,39 @@ export function ItemNameDialog(
 
   return (
     <Dialog
-      visible={true}
-      onHide={() => {
-        props.onClose?.(null);
-      }}
-      onShow={() => {
-        nameRef.current?.focus();
-        nameRef.current?.select();
+      open={true}
+      onOpenChange={(open) => {
+        if (!open) {
+          props.onClose?.(null);
+        }
       }}
-      style={{ width: "400px" }}
-      header={props?.title ?? "Name"}
     >
-      <div className="p-3">
-        <div className="my-2 text-sm">
-          {props.message || "Enter a name for the new item:"}
+      <DialogContent style={{ width: "400px" }}>
+        <DialogHeader>
+          <DialogTitle>{props?.title ?? "Name"}</DialogTitle>
+        </DialogHeader>
+        <div className="p-3">
+          <div className="my-2 text-sm">
+            {props.message || "Enter a name for the new item:"}
+          </div>
+          <InputText
+            ref={nameRef}
+            value={name}
+            className="w-full"
+            onChange={(e) => setName(e.target.value)}
+            onKeyDown={(ev) => {
+              if (ev.key === "Enter" && isValid) handleOk();
+            }}
+          />
+          {validationError && (
+            <div className="mt-2 text-red-500">{validationError}</div>
+          )}
         </div>
-        <InputText
-          ref={nameRef}
-          value={name}
-          className="w-full"
-          onChange={(e) => setName(e.target.value)}
-          onKeyDown={(ev) => {
-            if (ev.key === "Enter" && isValid) handleOk();
-          }}
-        />
-        {validationError && (
-          <div className="mt-2 text-red-500">{validationError}</div>
-        )}
-      </div>
-      <DialogButtons>
-        <Button onClick={handleOk} label="Ok" disabled={!isValid} />
-        <Button onClick={() => props.onClose?.(null)} label="Cancel" />
-      </DialogButtons>
+        <DialogButtons>
+          <Button onClick={handleOk} label="Ok" disabled={!isValid} />
+          <Button onClick={() => props.onClose?.(null)} label="Cancel" />
+        </DialogButtons>
+      </DialogContent>
     </Dialog>
   );
 }

package/src/editor/ui/PerfectTree.tsx

@@ -16,6 +16,8 @@ export interface TreeNode<T = any> {
   data?: T;
   /** Indicates if the node is expandable (has or can have children) */
   hasChildren?: boolean;
+  /** Indicates if the node can be dragged */
+  isDraggable?: boolean;
   /**
    * If present, contains the node's children.
    * Use undefined to signal that children have not yet been loaded.
@@ -530,7 +532,7 @@ const NodeContent = memo(
     return (
       <div
         className="tree-node mb-0.5 flex cursor-pointer items-center"
-        draggable={enableDragAndDrop}
+        draggable={enableDragAndDrop && !!node.isDraggable}
         onClick={handleSelect}
         onDragStart={(event) => handleDragStart(event)}
         onDragEnd={onDragEnd as any}

package/src/editor/ui/Spinner.tsx

@@ -4,6 +4,8 @@ export function Spinner({
   size?: "2xl" | "3xl" | "4xl" | "5xl";
 }) {
   return (
-    <i className={`pi pi-cog pi-spin text-${size} text-theme-secondary/40`}></i>
+    <i
+      className={`pi pi-spin pi-spinner text-${size} text-theme-secondary/40`}
+    ></i>
   );
 }