@alpaca-editor/core 1.0.4014 → 1.0.4017

package/src/config/config.tsx

@@ -16,6 +16,7 @@ import { DropListEditor } from "../editor/field-types/DropListEditor";
 import { RawEditor } from "../editor/field-types/RawEditor";
 import { CheckboxEditor } from "../editor/field-types/CheckboxEditor";
 import { DateFieldEditor } from "../editor/field-types/DateFieldEditor";
+import { DateTimeFieldEditor } from "../editor/field-types/DateTimeFieldEditor";
 
 import { ItemLocked } from "../editor/editor-warnings/ItemLocked";
 import { NoWriteAccess } from "../editor/editor-warnings/NoWriteAccess";
@@ -116,6 +117,7 @@ import {
   Bug,
   Timer,
   WandSparkles,
+  BadgeCheck,
 } from "lucide-react";
 
 import { Completions } from "../editor/sidebar/Completions";
@@ -284,6 +286,9 @@ export const getConfiguration = (): EditorConfiguration => {
       date: {
         editor: DateFieldEditor,
       },
+      datetime: {
+        editor: DateTimeFieldEditor,
+      },
       droptree: {
         editor: InternalLinkFieldEditor,
       },
@@ -499,8 +504,8 @@ export const getConfiguration = (): EditorConfiguration => {
           ...pageEditorViewBase,
         },
         {
-          name: "reviews",
-          title: "Reviews",
+          name: "comments",
+          title: "Comments",
           icon: <MessageCircleMore strokeWidth={1} />,
           leftSidebar: {
             panels: [
@@ -509,15 +514,25 @@ export const getConfiguration = (): EditorConfiguration => {
                 icon: "pi pi-comments",
                 title: "Comments & Suggestions",
                 content: <Comments />,
-                initialSize: 65,
+                initialSize: 100,
                 noOverflow: true,
               },
+            ],
+          },
+          ...pageEditorViewBase,
+        },
+        {
+          name: "reviews",
+          title: "Reviews",
+          icon: <BadgeCheck strokeWidth={1} />,
+          leftSidebar: {
+            panels: [
               {
                 name: "reviews",
-                icon: "pi pi-users",
+
                 title: "Reviews",
                 content: <Reviews />,
-                initialSize: 35,
+                initialSize: 100,
                 noOverflow: true,
               },
             ],
@@ -947,18 +962,10 @@ export function configureForUser(
       editor: {
         ...configuration.editor,
         views: configuration.editor.views
-          .filter((x) => x.name === "reviews")
+          .filter((x) => x.name === "comments" || x.name === "reviews")
           .map((x) => {
             return {
               ...x,
-              leftSidebar: {
-                ...x.leftSidebar,
-                panels: [
-                  ...(x.leftSidebar?.panels ?? []).filter(
-                    (x) => x.name !== "reviews",
-                  ),
-                ],
-              },
               toolbarFactory: previewToolbar,
             };
           }),

package/src/editor/FieldList.tsx

@@ -55,7 +55,7 @@ export function FieldList({
 
   return (
     <div className="text-dark">
-      <div className="tour-field-list sticky top-0 z-10 ml-[1px] flex items-center gap-2 border-b border-gray-200 bg-white p-2">
+      <div className="tour-field-list sticky top-0 z-10 flex items-center gap-2 border-b border-gray-200 bg-white p-2">
         <FilterInput
           className="flex-1"
           value={searchFilter}

package/src/editor/FieldListField.tsx

@@ -402,7 +402,7 @@ export default function FieldListField({
               <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">
+            <pre className="max-h-40 overflow-auto text-xs whitespace-pre-wrap select-text">
               {JSON.stringify(field, null, 2)}
             </pre>
           </div>

package/src/editor/ScrollingContentTree.tsx

@@ -10,12 +10,14 @@ export function ScrollingContentTree({
   selectedItemId,
   onSelectionChange,
   rootItemId,
+  rootItemIds,
   expandedItemId,
   scrollToSelected = true,
 }: {
   selectedItemId?: string;
   onSelectionChange?: (itemIds: ItemTreeNodeData[]) => void;
   rootItemId?: string;
+  rootItemIds?: string[];
   expandedItemId?: string;
   scrollToSelected?: boolean;
 }) {
@@ -62,6 +64,7 @@ export function ScrollingContentTree({
       <ContentTree
         language={editContext!.currentItemDescriptor?.language ?? "en"}
         rootItemId={rootItemId ?? contentItemId}
+        rootItemIds={rootItemIds}
         expandIdPath={expandedItem?.idPath}
         selectedItemIds={selectedItemIds}
         selectionMode="single"

package/src/editor/client/editContext.ts

@@ -402,6 +402,7 @@ export type ModifiedField = FieldDescriptor & {
   isDirty: boolean;
   modifiedBy: User;
   timestamp: number;
+  saveSequence: number;
 };
 
 export type ModifiedFieldsContextType = {

package/src/editor/client/itemsRepository.ts

@@ -31,11 +31,15 @@ export type ItemsRepository = {
     isDirty: boolean,
     value: any | null,
     rawValue?: string | null,
-  ) => void;
+  ) => Promise<number>;
 
   refreshItems: (items: ItemDescriptor[]) => Promise<void>;
   revision: number;
-  onFieldSaved: (field: FieldDescriptor, value: string | null) => void;
+  onFieldSaved: (
+    field: FieldDescriptor,
+    value: string | null,
+    saveSequence: number,
+  ) => void;
   onItemsDeleted: (items: DeletedItem[]) => void;
   //addToModifiedFields: (fieldDescriptors: FieldDescriptor[]) => void;
   subscribeItemsChanged: (
@@ -101,6 +105,7 @@ export function useItemsRepository(
   );
   const pendingRequests = useRef<Map<string, Promise<void>>>(new Map());
   const pendingStubsRequests = useRef<Map<string, Promise<void>>>(new Map());
+  const saveSequenceCounter = useRef<number>(0);
 
   const [revision, setRevision] = useState(0);
   const itemsChangedListeners = useRef<Set<(changes: ItemChange[]) => void>>(
@@ -366,10 +371,10 @@ export function useItemsRepository(
       rawValue?: string | null,
     ) => {
       const item = await getItem(field.item);
-      if (!item) return;
+      if (!item) return 0;
 
       const fieldToUpdate = item.fields.find((x) => x.id === field.fieldId);
-      if (!fieldToUpdate) return;
+      if (!fieldToUpdate) return 0;
 
       // Update the field value in the item copy
       const updatedItem = {
@@ -387,8 +392,10 @@ export function useItemsRepository(
 
       itemsMap.current.set(generateKey(field.item), updatedItem);
 
+      const val = rawValue !== undefined ? rawValue : value;
+      const currentSaveSequence = ++saveSequenceCounter.current;
+
       setModifiedFields((prevModifiedFields) => {
-        const val = rawValue !== undefined ? rawValue : value;
         const modifiedField = prevModifiedFields.find(
           (x) =>
             x.fieldId === field.fieldId &&
@@ -405,6 +412,7 @@ export function useItemsRepository(
               isDirty: isDirty,
               modifiedBy: user,
               timestamp: Date.now(),
+              saveSequence: currentSaveSequence,
             },
           ];
         } else {
@@ -412,6 +420,7 @@ export function useItemsRepository(
           modifiedField.value = val;
           modifiedField.modifiedBy = user;
           modifiedField.timestamp = Date.now();
+          modifiedField.saveSequence = currentSaveSequence;
         }
 
         return [...prevModifiedFields];
@@ -432,6 +441,7 @@ export function useItemsRepository(
       });
 
       //      setRevision((prev) => prev + 1);
+      return currentSaveSequence;
     },
     [getItem, setModifiedFields, setLastEditedFields],
   );
@@ -510,7 +520,7 @@ export function useItemsRepository(
   );
 
   const onFieldSaved = useCallback(
-    (field: FieldDescriptor, value: string | null) => {
+    (field: FieldDescriptor, value: string | null, saveSequence: number) => {
       setModifiedFields((prevModifiedFields) => {
         const modifiedField = prevModifiedFields.find(
           (x) =>
@@ -520,7 +530,15 @@ export function useItemsRepository(
             x.item.version === field.item.version,
         );
         if (modifiedField) {
-          if (modifiedField.value === value) modifiedField.isDirty = false;
+          // Only mark as not dirty if this save operation corresponds to the most recent edit
+          // or if the value matches and this is the latest save operation
+          if (
+            modifiedField.saveSequence === saveSequence ||
+            (modifiedField.value === value &&
+              modifiedField.saveSequence <= saveSequence)
+          ) {
+            modifiedField.isDirty = false;
+          }
           return [...prevModifiedFields];
         }
         return prevModifiedFields;

package/src/editor/client/operations.ts

@@ -344,7 +344,7 @@ export function getOperationsContext(
         return;
       }
 
-      state.itemsRepository.updateFieldValue(
+      const saveSequence = await state.itemsRepository.updateFieldValue(
         field,
         state.user ?? { name: "unknown", ai: false },
         true,
@@ -353,7 +353,13 @@ export function getOperationsContext(
       );
 
       if (refresh === "immediate") {
-        return editFieldImmediate({ field, value, rawValue, refresh });
+        return editFieldImmediate({
+          field,
+          value,
+          rawValue,
+          refresh,
+          saveSequence,
+        });
       }
       if (
         lastEditField.current?.fieldId !== field.fieldId ||
@@ -382,11 +388,13 @@ export function getOperationsContext(
       value,
       rawValue,
       refresh = "immediate",
+      saveSequence,
     }: {
       field: FieldDescriptor;
       value?: string;
       rawValue?: string | null;
       refresh?: "none" | "immediate" | "delayed" | "waitForQuietPeriod";
+      saveSequence?: number;
     }): Promise<void> => {
       // state.itemsRepository.updateFieldValue(
       //   field,
@@ -404,7 +412,7 @@ export function getOperationsContext(
       if (op) {
         await executeOp(op, { refresh });
         await state.itemsRepository.refreshItems([field.item]);
-        state.itemsRepository.onFieldSaved(field, val);
+        state.itemsRepository.onFieldSaved(field, val, saveSequence || 0);
       }
     },
     [state.itemsRepository, executeOp],
@@ -422,14 +430,20 @@ export function getOperationsContext(
       rawValue?: string | null;
       refresh?: "none" | "immediate" | "delayed" | "waitForQuietPeriod";
     }) => {
-      state.itemsRepository.updateFieldValue(
+      const saveSequence = await state.itemsRepository.updateFieldValue(
         field,
         state.user ?? { name: "unknown", ai: false },
         true,
         value,
         rawValue,
       );
-      return editFieldImmediate({ field, value, rawValue, refresh });
+      return editFieldImmediate({
+        field,
+        value,
+        rawValue,
+        refresh,
+        saveSequence,
+      });
     },
     state.configuration.debounceFieldEditsInterval * 2,
     { trailing: true },

package/src/editor/client/pageModelBuilder.ts

@@ -43,7 +43,7 @@ export function usePageModel(
     const keys: string[] = [];
     const collect = (c: ComponentSkeleton) => {
       c.placeholders.forEach((ph) => {
-        keys.push(ph.key);
+        if (ph.editable) keys.push(ph.key);
         ph.components.forEach(collect);
       });
     };

package/src/editor/context-menu/InsertMenu.tsx

@@ -31,24 +31,42 @@ export const InsertMenuTemplate = ({
   }, [activeTab]);
 
   const [recentTemplates, setRecentTemplates] = useState<string[]>([]);
-
   const [recentItems, setRecentItems] = useState<FullItem[]>([]);
   const [hoveredItem, setHoveredItem] = useState<ResultItem>();
   const [wizards, setWizards] = useState<Wizard[]>([]);
 
+  // Loading states
+  const [isLoadingRecent, setIsLoadingRecent] = useState(false);
+  const [isLoadingWizards, setIsLoadingWizards] = useState(false);
+
   const hideTimeoutRef = useRef<NodeJS.Timeout>(undefined);
   const opRef = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
     const loadRecentItems = async () => {
-      const items = await editContext?.itemsRepository.getItems(
-        recentTemplates.map((id) => ({
-          id,
-          version: 0,
-          language: "en",
-        })),
-      );
+      if (recentTemplates.length === 0) return;
+
+      setIsLoadingRecent(true);
+      try {
+        const items = await editContext?.itemsRepository.getItems(
+          recentTemplates.map((id) => ({
+            id,
+            version: 0,
+            language: "en",
+          })),
+        );
 
-      if (items) setRecentItems(items);
+        if (items) {
+          // Remove duplicates based on item.id to prevent React key conflicts
+          const uniqueItems = items.filter(
+            (item, index, self) =>
+              self.findIndex((i) => i.id === item.id) === index,
+          );
+          setRecentItems(uniqueItems);
+        }
+      } finally {
+        setIsLoadingRecent(false);
+      }
     };
     loadRecentItems();
   }, [recentTemplates]);
@@ -57,16 +75,37 @@ export const InsertMenuTemplate = ({
     const stored = localStorage.getItem("editor.recentTemplates");
     if (stored) {
       const parsed = JSON.parse(stored);
-      setRecentTemplates(parsed);
+      // Ensure the parsed data is a string array and remove duplicates
+      const templateIds = Array.isArray(parsed)
+        ? parsed.filter((id): id is string => typeof id === "string")
+        : [];
+      const uniqueTemplates = [...new Set(templateIds)];
+      setRecentTemplates(uniqueTemplates);
+
+      // Update localStorage if duplicates were found or invalid data was cleaned
+      if (
+        uniqueTemplates.length !== templateIds.length ||
+        templateIds.length !== parsed.length
+      ) {
+        localStorage.setItem(
+          "editor.recentTemplates",
+          JSON.stringify(uniqueTemplates),
+        );
+      }
     }
   }, [insertOptions]);
 
   useEffect(() => {
     const loadWizards = async () => {
-      const wizards = await editContext?.configuration.pageWizard.getWizards(
-        item.descriptor,
-      );
-      setWizards(wizards ?? []);
+      setIsLoadingWizards(true);
+      try {
+        const wizards = await editContext?.configuration.pageWizard.getWizards(
+          item.descriptor,
+        );
+        setWizards(wizards ?? []);
+      } finally {
+        setIsLoadingWizards(false);
+      }
     };
     loadWizards();
   }, [item]);
@@ -106,21 +145,26 @@ export const InsertMenuTemplate = ({
   const options =
     insertOptions.length === 0
       ? undefined
-      : insertOptions.map((x) => ({
-          label: x.name,
-          id: x.id,
-          icon: (
-            <img
-              className="p-menuitem-icon"
-              src={x.icon}
-              style={{ height: "16px" }}
-              width="16"
-              height="16"
-              onDragStart={(e) => e.preventDefault()}
-            ></img>
-          ),
-          command: getCommand(x),
-        }));
+      : insertOptions
+          .filter(
+            (x, index, self) =>
+              self.findIndex((item) => item.id === x.id) === index,
+          ) // Remove duplicates
+          .map((x) => ({
+            label: x.name,
+            id: x.id,
+            icon: (
+              <img
+                className="p-menuitem-icon"
+                src={x.icon}
+                style={{ height: "16px" }}
+                width="16"
+                height="16"
+                onDragStart={(e) => e.preventDefault()}
+              ></img>
+            ),
+            command: getCommand(x),
+          }));
 
   const tabs: Tab[] = [
     {
@@ -283,6 +327,8 @@ export const InsertMenuTemplate = ({
     });
   }
 
+  const isAnyTabLoading = isLoadingRecent || isLoadingWizards;
+
   return (
     <div
       className="p-2"
@@ -331,7 +377,8 @@ export const InsertMenuTemplate = ({
             tabs={tabs}
             setActiveTab={setActiveTab}
             activeTab={activeTab}
-          ></SimpleTabs>
+            isLoading={isAnyTabLoading}
+          />
         </div>
       </div>
     </div>

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

@@ -109,7 +109,7 @@ export function DateFieldEditor({
   };
 
   return (
-    <Popover>
+    <Popover enableIframeClickDetection={false}>
       <PopoverTrigger asChild>
         <Button
           variant="outline"
@@ -125,7 +125,13 @@ export function DateFieldEditor({
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-auto p-0" align="start">
-        <Calendar mode="single" selected={date} onSelect={handleDateSelect} />
+        <div
+          className="p-3"
+          onMouseDown={(e) => e.stopPropagation()}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Calendar mode="single" selected={date} onSelect={handleDateSelect} />
+        </div>
       </PopoverContent>
     </Popover>
   );