@alpaca-editor/core 1.0.4000 → 1.0.4008

package/src/editor/FieldList.tsx

@@ -154,6 +154,21 @@ function FieldListForSingleItem({
     ? (fields as Field[])
     : (Object.values(fields) as Field[]);
 
+  // Create section order mapping before any filtering to preserve original order
+  const originalSectionOrder = new Map<string, number>();
+  fieldsArray.forEach((field) => {
+    const section = field.section || "";
+    const sectionSortOrder = field.sectionSortOrder || 0;
+
+    // Use the minimum sectionSortOrder for each section to ensure consistent ordering
+    if (!originalSectionOrder.has(section)) {
+      originalSectionOrder.set(section, sectionSortOrder);
+    } else {
+      const existing = originalSectionOrder.get(section)!;
+      originalSectionOrder.set(section, Math.min(existing, sectionSortOrder));
+    }
+  });
+
   if (filter) fieldsArray = fieldsArray.filter(filter);
 
   if (searchFilter) {
@@ -173,21 +188,29 @@ function FieldListForSingleItem({
     // Group initialization
     const section = value.section || "";
 
-    if (value.descriptor.item.id)
-      if (!acc[section]) {
-        acc[section] = [];
-      }
-    // Grouping
-    acc[section].push(value);
+    if (!acc[section]) {
+      acc[section] = [];
+    }
+
+    // Only add fields that have a valid descriptor item id
+    if (value.descriptor.item.id) {
+      acc[section].push(value);
+    }
 
     return acc;
   }, {} as any);
 
   const sectionList: Field[][] = Object.values(sectionsGrouping);
-  sectionList.sort(
-    (a: Field[], b: Field[]) =>
-      (a[0]?.sectionSortOrder || 0) - (b[0]?.sectionSortOrder || 0),
-  );
+
+  // Sort sections using the original section order, not the first field after filtering
+  sectionList.sort((a: Field[], b: Field[]) => {
+    const sectionA = a[0]?.section || "";
+    const sectionB = b[0]?.section || "";
+    const orderA = originalSectionOrder.get(sectionA) || 0;
+    const orderB = originalSectionOrder.get(sectionB) || 0;
+
+    return orderA - orderB;
+  });
 
   function getSectionFields(fields: Field[]) {
     fields.sort((a: any, b: any) => a?.sortOrder - b?.sortOrder);
@@ -204,15 +227,18 @@ function FieldListForSingleItem({
     ));
   }
   return sectionList
-    .map((x) => x[0]?.section)
-    .filter((x) => !sections || sections.includes(x!))
-    .map((section) =>
-      simplified ? (
-        getSectionFields(sectionsGrouping[section!])
+    .filter((sectionFields) => {
+      const section = sectionFields[0]?.section;
+      return !sections || sections.includes(section!);
+    })
+    .map((sectionFields) => {
+      const section = sectionFields[0]?.section;
+      return simplified ? (
+        getSectionFields(sectionFields)
       ) : (
         <Section key={section} title={section!}>
-          {getSectionFields(sectionsGrouping[section!])}
+          {getSectionFields(sectionFields)}
         </Section>
-      ),
-    );
+      );
+    });
 }

package/src/editor/FieldListField.tsx

@@ -5,7 +5,6 @@ import { EditorConfiguration } from "../config/types";
 
 import { useEffect, useRef, useState } from "react";
 
-import { OverlayPanel } from "primereact/overlaypanel";
 import { FieldHistoryItem, SingleValidatorResult } from "../types";
 
 import { getSessionWithFieldLock } from "./utils";
@@ -19,9 +18,20 @@ import {
 import { useThrottledCallback } from "use-debounce";
 import { SimpleIconButton } from "./ui/SimpleIconButton";
 import { FieldHistory } from "./FieldHistory";
-import { History, MessageCircle, WandSparkles } from "lucide-react";
+import {
+  History,
+  MessageCircle,
+  WandSparkles,
+  MoreVertical,
+  ExternalLink,
+} from "lucide-react";
 import { Checkbox } from "../components/ui/checkbox";
 import { CopyButton } from "../components/ui/copy-button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../components/ui/popover";
 
 export default function FieldListField({
   field,
@@ -50,8 +60,10 @@ export default function FieldListField({
   const fieldItem = field.descriptor.item;
 
   const [showRawValue, setShowRawValue] = useState(false);
+  const [showFieldJson, setShowFieldJson] = useState(false);
+  const [fieldMenuOpen, setFieldMenuOpen] = useState(false);
+  const [fieldHistoryOpen, setFieldHistoryOpen] = useState(false);
   const generatorsOverlay = useRef<FieldActionsOverlayRef>(null);
-  const fieldHistoryOverlay = useRef<OverlayPanel>(null);
   const [generatorButtons, setButtons] = useState<FieldButton[]>();
   const [isModified, setIsModified] = useState(false);
   const [isSaved, setIsSaved] = useState(false);
@@ -134,7 +146,7 @@ export default function FieldListField({
       fieldLockedBySession.sessionId !== editContext.sessionId) ||
     false;
 
-  let classNames = " flex items-stretch";
+  let classNames = "flex items-stretch";
   if (executingAction?.state == "running") classNames += " executing-action ";
   else {
     if (isFocusedField) classNames += " focused-field ";
@@ -197,6 +209,21 @@ export default function FieldListField({
 
   const config = editContext.configuration.fieldTypes[field.type];
 
+  const handleOpenFieldItem = () => {
+    // Load the field item in the editor
+    editContext.loadItem({
+      id: field.id,
+      language: "en",
+      version: 0,
+    });
+    setFieldMenuOpen(false);
+  };
+
+  const handleShowFieldJson = () => {
+    setShowFieldJson(!showFieldJson);
+    setFieldMenuOpen(false);
+  };
+
   return (
     <div
       key={
@@ -228,9 +255,35 @@ export default function FieldListField({
 
       <div className="flex-1">
         <div className="flex min-h-7 flex-wrap items-center gap-x-3 gap-y-1">
-          <label className="block text-xs font-medium select-text">
-            {title || field.displayName || field.name}
-          </label>
+          {!simplified ? (
+            <Popover open={fieldMenuOpen} onOpenChange={setFieldMenuOpen}>
+              <PopoverTrigger asChild>
+                <button className="rounded py-0.5 text-left text-xs font-medium transition-colors hover:bg-gray-100">
+                  {title || field.displayName || field.name}
+                </button>
+              </PopoverTrigger>
+              <PopoverContent className="w-56 p-1" align="start" side="bottom">
+                <button
+                  className="flex w-full items-center gap-2 rounded px-3 py-2 text-sm transition-colors hover:bg-gray-100"
+                  onClick={handleOpenFieldItem}
+                >
+                  <ExternalLink strokeWidth={1} className="h-4 w-4" />
+                  Open Field Item
+                </button>
+                <button
+                  className="flex w-full items-center gap-2 rounded px-3 py-2 text-sm transition-colors hover:bg-gray-100"
+                  onClick={handleShowFieldJson}
+                >
+                  <span className="font-mono text-sm">{"{}"}</span>
+                  {showFieldJson ? "Hide" : "Show"} Field JSON
+                </button>
+              </PopoverContent>
+            </Popover>
+          ) : (
+            <label className="block text-xs font-medium select-text">
+              {title || field.displayName || field.name}
+            </label>
+          )}
 
           {fieldLockedBySession &&
             fieldLockedBySession.sessionId !== editContext.sessionId && (
@@ -308,22 +361,30 @@ export default function FieldListField({
                     label="Add Comment"
                   />
                   {!readonly && renderGeneratorButtons()}
-                  <SimpleIconButton
-                    icon={<History strokeWidth={1} className="h-3.5 w-3.5" />}
-                    onClick={(ev) => {
-                      fieldHistoryOverlay.current?.toggle(ev);
-                      ev.preventDefault();
-                      ev.stopPropagation();
-                    }}
-                    label="Field History"
-                  />
-                  <OverlayPanel ref={fieldHistoryOverlay} className="p-1">
-                    <FieldHistory
-                      field={field}
-                      onHover={(x) => setHistoryEntry(x)}
-                      onRevert={() => fieldHistoryOverlay.current?.hide()}
-                    />
-                  </OverlayPanel>
+                  <Popover
+                    open={fieldHistoryOpen}
+                    onOpenChange={setFieldHistoryOpen}
+                  >
+                    <PopoverTrigger asChild>
+                      <button
+                        className="rounded p-1 transition-colors hover:bg-gray-100"
+                        aria-label="Field History"
+                      >
+                        <History strokeWidth={1} className="h-3.5 w-3.5" />
+                      </button>
+                    </PopoverTrigger>
+                    <PopoverContent
+                      className="w-80 p-2"
+                      align="end"
+                      side="bottom"
+                    >
+                      <FieldHistory
+                        field={field}
+                        onHover={(x) => setHistoryEntry(x)}
+                        onRevert={() => setFieldHistoryOpen(false)}
+                      />
+                    </PopoverContent>
+                  </Popover>
                 </div>
               </>
             )}
@@ -333,6 +394,20 @@ export default function FieldListField({
             {executingAction?.message}
           </div>
         )}
+
+        {/* Field JSON Display */}
+        {showFieldJson && (
+          <div className="mt-2 mb-2 rounded border bg-gray-50 p-2 text-xs">
+            <div className="mb-2 flex items-center justify-between">
+              <span className="font-medium">Field JSON</span>
+              <CopyButton textToCopy={JSON.stringify(field, null, 2)} />
+            </div>
+            <pre className="max-h-40 overflow-auto text-xs whitespace-pre-wrap">
+              {JSON.stringify(field, null, 2)}
+            </pre>
+          </div>
+        )}
+
         {!compareToField && (
           <div className="mt-1 p-0 text-xs">
             {getFieldEditor(

package/src/editor/client/EditorClient.tsx

@@ -1796,14 +1796,16 @@ export function EditorClient({
           return;
         }
 
+        console.log("dragObject", dragObject);
+
         if (
           dragObject.type == "component" ||
-          (dragObject.type == "link-component" && dragObject.component)
+          (dragObject.type == "items" && dragObject.items)
         ) {
           const parentComponent =
             parentId && page ? getComponentById(parentId, page) : null;
 
-          if (dragObject.type == "link-component") {
+          if (dragObject.type == "items" && dragObject.items) {
             op = {
               type: "link-component",
               mainItem: page!.item.descriptor,
@@ -1817,9 +1819,10 @@ export function EditorClient({
               placeholderIndex: index,
               date: new Date().toISOString(),
               id: uuid(),
-              linkedComponentItem: dragObject.component,
+              linkedComponentItem: dragObject.items[0],
               description: "Link component",
             } as LinkComponentOperation;
+            console.log("op", op);
           } else {
             if (!dragObject.component) return;
             op = {

package/src/editor/client/itemsRepository.ts

@@ -11,6 +11,7 @@ import { fetchItems, fetchItemStubs } from "../services/contentService";
 import { getItemDescriptor } from "../utils";
 import { EditedField, ModifiedField } from "./editContext";
 import { User } from "../../types";
+import { templatesRootItemId } from "../../config/config";
 
 export type ItemChange = {
   item: ItemDescriptor;
@@ -43,6 +44,52 @@ export type ItemsRepository = {
   clear: () => void;
 };
 
+// Standard Sitecore template IDs for template-related items
+const TEMPLATE_TEMPLATE_ID = "AB86861A-6030-46C5-B394-E8F99E8B87DB"; // Template template
+const TEMPLATE_FIELD_TEMPLATE_ID = "455A3E98-A627-4B40-8035-E683A0331AC7"; // Template field template
+const TEMPLATE_SECTION_TEMPLATE_ID = "E269FBB5-3750-427A-9149-7AA950B49301"; // Template section template
+
+/**
+ * Checks if an item change represents a template-related modification that should trigger cache clearing
+ */
+const isTemplateChange = async (
+  change: ItemChange,
+  getItem: (descriptor: ItemDescriptor) => Promise<FullItem | undefined>,
+): Promise<boolean> => {
+  try {
+    const item = await getItem(change.item);
+    if (!item) return false;
+
+    // Check if the item is under the /sitecore/templates path
+    if (
+      item.path &&
+      item.path.toLowerCase().startsWith("/sitecore/templates")
+    ) {
+      return true;
+    }
+
+    // Check if the item's templateId indicates it's a template-related item
+    const templateId = item.templateId?.toLowerCase();
+    if (
+      templateId === TEMPLATE_TEMPLATE_ID.toLowerCase() ||
+      templateId === TEMPLATE_FIELD_TEMPLATE_ID.toLowerCase() ||
+      templateId === TEMPLATE_SECTION_TEMPLATE_ID.toLowerCase()
+    ) {
+      return true;
+    }
+
+    // Check if the item is under the templates root using the configured templates root ID
+    if (item.path && item.path.includes(templatesRootItemId)) {
+      return true;
+    }
+
+    return false;
+  } catch (error) {
+    console.error("Error checking if item change is template-related:", error);
+    return false;
+  }
+};
+
 export function useItemsRepository(
   setModifiedFields: React.Dispatch<React.SetStateAction<ModifiedField[]>>,
   setLastEditedFields: React.Dispatch<React.SetStateAction<EditedField[]>>,
@@ -509,16 +556,40 @@ export function useItemsRepository(
     [setRevision],
   );
 
+  const clear = useCallback(() => {
+    itemsMap.current.clear();
+    stubsMap.current.clear();
+    fallbackDependencyMap.current.clear();
+    //setRevision((x) => x + 1);
+  }, []);
+
   const subscribeItemsChanged = useCallback(
     (callback: (changes: ItemChange[]) => void) => {
-      itemsChangedListeners.current.add(callback);
+      const wrappedCallback = async (changes: ItemChange[]) => {
+        // Check if any of the changes are template-related
+        const templateChanges = await Promise.all(
+          changes.map((change) => isTemplateChange(change, getItem)),
+        );
+
+        // If any template changes are detected, clear the cache
+        if (templateChanges.some((isTemplate) => isTemplate)) {
+          console.log("Template changes detected, clearing cache...");
+          clear();
+          setRevision((prev) => prev + 1);
+        }
+
+        // Call the original callback
+        callback(changes);
+      };
+
+      itemsChangedListeners.current.add(wrappedCallback);
 
       // Return an unsubscribe function
       return () => {
-        itemsChangedListeners.current.delete(callback);
+        itemsChangedListeners.current.delete(wrappedCallback);
       };
     },
-    [],
+    [clear, getItem],
   );
 
   const triggerItemsChangedEvent = (changes: ItemChange[]) => {
@@ -528,13 +599,6 @@ export function useItemsRepository(
     }
   };
 
-  const clear = useCallback(() => {
-    itemsMap.current.clear();
-    stubsMap.current.clear();
-    fallbackDependencyMap.current.clear();
-    //setRevision((x) => x + 1);
-  }, []);
-
   const repo = useMemo(() => {
     return {
       getItems,

package/src/editor/client/pageModelBuilder.ts

@@ -161,7 +161,7 @@ export function usePageModel(
         datasourceItem,
         items,
         placeholders,
-        isShared: !(datasourceItem?.path.startsWith(pageItem.path) || true),
+        isShared: !datasourceItem?.path?.startsWith(pageItem.path) || false,
         parentPlaceholder,
         editable: skeleton.editable ?? true,
         type: datasourceItem?.templateName || name, // TODO: We need the name for AI page wizard - we should not use the template name

package/src/editor/commands/itemCommands.tsx

@@ -41,8 +41,8 @@ export const deleteItemCommand: ItemCommand = {
         message: (
           <div>
             Are you sure you want to delete{" "}
-            <em>{items.map((x) => x.name).join(", ")}</em>? This cannot be
-            undone.
+            <em>{items.map((x) => x.name).join(", ")}</em>?
+            <div className="mt-4">This cannot be undone.</div>
           </div>
         ),
         header: "Confirmation",
@@ -358,7 +358,6 @@ export const publishItemCommand: ItemCommand = {
   },
 };
 
-
 export const exportItemsCommand: ItemCommand = {
   id: "exportItem",
   label: "Export",

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

@@ -0,0 +1,132 @@
+"use client";
+
+import * as React from "react";
+import { format } from "date-fns";
+import { Calendar as CalendarIcon } from "lucide-react";
+import { useEditContext } from "../client/editContext";
+import { cn } from "../../lib/utils";
+import { Button } from "../../components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../components/ui/popover";
+import { Calendar } from "../../components/ui/calendar";
+import { useEffect, useState } from "react";
+import { ProgressSpinner } from "primereact/progressspinner";
+import { DateField, DateFieldValue } from "../fieldTypes";
+
+// Helper function to format date to compact ISO format: YYYYMMDDTHHMMSSZ
+const formatDateToCompactISO = (date: Date): string => {
+  const year = date.getUTCFullYear().toString();
+  const month = (date.getUTCMonth() + 1).toString().padStart(2, "0");
+  const day = date.getUTCDate().toString().padStart(2, "0");
+  const hours = date.getUTCHours().toString().padStart(2, "0");
+  const minutes = date.getUTCMinutes().toString().padStart(2, "0");
+  const seconds = date.getUTCSeconds().toString().padStart(2, "0");
+
+  return `${year}${month}${day}T${hours}${minutes}${seconds}Z`;
+};
+
+export function DateFieldEditor({
+  field,
+  readOnly,
+}: {
+  field: DateField;
+  readOnly?: boolean;
+}) {
+  const editContext = useEditContext();
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [date, setDate] = useState<Date | undefined>(undefined);
+
+  useEffect(() => {
+    // Parse the date from the field rawValue (compact ISO format: YYYYMMDDTHHMMSSZ)
+    const dateString = field.rawValue;
+
+    if (dateString && dateString.trim() !== "") {
+      try {
+        // Handle compact ISO format: 20250714T220000Z
+        let parsedDate: Date;
+        if (dateString.match(/^\d{8}T\d{6}Z$/)) {
+          // Convert compact format to standard ISO: 20250714T220000Z -> 2025-07-14T22:00:00Z
+          const standardISO = dateString.replace(
+            /(\d{4})(\d{2})(\d{2})T(\d{2})(\d{2})(\d{2})Z/,
+            "$1-$2-$3T$4:$5:$6Z",
+          );
+          parsedDate = new Date(standardISO);
+        } else {
+          // Fallback to direct parsing
+          parsedDate = new Date(dateString);
+        }
+
+        if (!isNaN(parsedDate.getTime())) {
+          setDate(parsedDate);
+        } else {
+          setDate(undefined);
+        }
+      } catch (error) {
+        console.warn("Failed to parse date from field value:", dateString);
+        setDate(undefined);
+      }
+    } else {
+      setDate(undefined);
+    }
+  }, [field.rawValue]);
+
+  if (!editContext) return null;
+
+  const fieldItem = field.descriptor.item;
+  if (!fieldItem) return null;
+
+  if (isUpdating) {
+    return <ProgressSpinner style={{ width: "18px", height: "18px" }} />;
+  }
+
+  const handleDateSelect = async (selectedDate: Date | undefined) => {
+    if (readOnly) return;
+
+    setIsUpdating(true);
+
+    try {
+      // Format date to compact ISO format: YYYYMMDDTHHMMSSZ
+      const rawValue = selectedDate ? formatDateToCompactISO(selectedDate) : "";
+
+      await editContext.operations.editField({
+        field: field.descriptor,
+        rawValue: rawValue,
+        value: rawValue,
+        refresh: "immediate",
+      });
+    } catch (error) {
+      console.error("Failed to update date field:", error);
+      // Show error to user if possible
+      if (editContext.showToast) {
+        editContext.showToast("Failed to update date. Please try again.");
+      }
+    } finally {
+      setIsUpdating(false);
+    }
+  };
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          data-empty={!date}
+          className={cn(
+            "bg-gray-5 justify-start p-1 text-left text-xs font-normal",
+            !date && "text-muted-foreground",
+          )}
+          disabled={readOnly}
+        >
+          <CalendarIcon className="mr-2 h-4 w-4" />
+          {date ? format(date, "PPP") : <span>Pick a date!</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <Calendar mode="single" selected={date} onSelect={handleDateSelect} />
+      </PopoverContent>
+    </Popover>
+  );
+}

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

@@ -36,7 +36,7 @@ export function ImageFieldEditor({
 
   return (
     <div>
-      <div className="focus-shadow flex h-full flex-wrap gap-2">
+      <div className="focus-shadow bg-gray-5 flex h-full flex-wrap gap-2">
         <div className="relative flex h-48 w-48 cursor-pointer items-center justify-center border border-gray-300">
           {!readOnly && <ImageEditor field={field} />}
         </div>

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

@@ -137,8 +137,8 @@ export function InternalLinkFieldEditor({
       <div
         ref={texboxRef}
         className={classNames(
-          "justiy-between focus-shadow flex cursor-pointer justify-between border p-1.5 text-xs",
-          readOnly ? "bg-gray-50" : "bg-white",
+          "justiy-between focus-shadow bg-gray-5 flex cursor-pointer justify-between border p-1.5 text-xs",
+          readOnly ? "bg-gray-100" : "",
         )}
         onClick={(e) => {
           if (readOnly) return;

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

@@ -34,8 +34,8 @@ export function LinkFieldEditor({
     <>
       <div
         className={classNames(
-          "focus-shadow border-gray-3 bg-gray-5 flex justify-between border p-2",
-          readOnly ? "bg-gray-100" : "cursor-pointer bg-white",
+          "focus-shadow border-gray-3 bg-gray-5 flex justify-between border p-1.5",
+          readOnly ? "bg-gray-100" : "cursor-pointer",
         )}
         onClick={(e) => {
           if (readOnly) return;

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

@@ -57,7 +57,11 @@ export function MultiLineText({
           fieldItem.language &&
         editContextRef.current?.focusedField?.item.version === fieldItem.version
       ) {
-        if (inputRef.current) {
+        // Only focus if no other element currently has focus (e.g., popover buttons)
+        if (
+          inputRef.current &&
+          (!document.activeElement || document.activeElement === document.body)
+        ) {
           inputRef.current.focus();
         }
       }

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

@@ -34,7 +34,7 @@ export function PictureFieldEditor({
 
   return (
     <div>
-      <div className="focus-shadow flex h-full flex-wrap gap-2">
+      <div className="focus-shadow bg-gray-5 flex h-full flex-wrap gap-2">
         {field?.value?.variants?.map((variant) => (
           <div key={variant.name}>
             <div

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

@@ -141,7 +141,11 @@ export function SingleLineText({
           fieldItem.language &&
         editContextRef.current?.focusedField?.item.version === fieldItem.version
       ) {
-        if (inputRef.current) {
+        // Only focus if no other element currently has focus (e.g., popover buttons)
+        if (
+          inputRef.current &&
+          (!document.activeElement || document.activeElement === document.body)
+        ) {
           inputRef.current.focus();
         }
       }