@alpaca-editor/core 1.0.4015 → 1.0.4017

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

@@ -0,0 +1,281 @@
+"use client";
+
+import * as React from "react";
+import { format } from "date-fns";
+import { Calendar as CalendarIcon, Clock } 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 { Input } from "../../components/ui/input";
+import { useEffect, useState } from "react";
+import { ProgressSpinner } from "primereact/progressspinner";
+import { DateTimeField, DateTimeFieldValue } 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 DateTimeFieldEditor({
+  field,
+  readOnly,
+}: {
+  field: DateTimeField;
+  readOnly?: boolean;
+}) {
+  const editContext = useEditContext();
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [date, setDate] = useState<Date | undefined>(undefined);
+  const [time, setTime] = useState<string>("");
+  const [hours, setHours] = useState<number>(0);
+  const [minutes, setMinutes] = useState<number>(0);
+
+  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);
+          const parsedHours = parsedDate.getHours();
+          const parsedMinutes = parsedDate.getMinutes();
+          setHours(parsedHours);
+          setMinutes(parsedMinutes);
+          setTime(
+            `${parsedHours.toString().padStart(2, "0")}:${parsedMinutes.toString().padStart(2, "0")}`,
+          );
+        } else {
+          setDate(undefined);
+          setHours(0);
+          setMinutes(0);
+          setTime("");
+        }
+      } catch (error) {
+        console.warn("Failed to parse date from field value:", dateString);
+        setDate(undefined);
+        setHours(0);
+        setMinutes(0);
+        setTime("");
+      }
+    } else {
+      setDate(undefined);
+      setHours(0);
+      setMinutes(0);
+      setTime("");
+    }
+  }, [field.rawValue]);
+
+  if (!editContext) return null;
+
+  const fieldItem = field.descriptor.item;
+  if (!fieldItem) return null;
+
+  const updateDateTime = async (newDate?: Date, newTime?: string) => {
+    if (readOnly) return;
+
+    setIsUpdating(true);
+
+    try {
+      let finalDate: Date | undefined;
+
+      if (newDate || date) {
+        const baseDate = newDate || date!;
+        const timeToUse = newTime !== undefined ? newTime : time;
+
+        if (timeToUse && timeToUse.match(/^\d{2}:\d{2}$/)) {
+          const timeParts = timeToUse.split(":");
+          if (timeParts.length === 2 && timeParts[0] && timeParts[1]) {
+            const hours = parseInt(timeParts[0], 10);
+            const minutes = parseInt(timeParts[1], 10);
+            if (!isNaN(hours) && !isNaN(minutes)) {
+              finalDate = new Date(baseDate);
+              finalDate.setHours(hours, minutes, 0, 0);
+            } else {
+              finalDate = baseDate;
+            }
+          } else {
+            finalDate = baseDate;
+          }
+        } else {
+          finalDate = baseDate;
+        }
+      }
+
+      // Format date to compact ISO format: YYYYMMDDTHHMMSSZ
+      const rawValue = finalDate ? formatDateToCompactISO(finalDate) : "";
+
+      await editContext.operations.editField({
+        field: field.descriptor,
+        rawValue: rawValue,
+        value: rawValue,
+        refresh: "immediate",
+      });
+    } catch (error) {
+      console.error("Failed to update datetime field:", error);
+      // Show error to user if possible
+      if (editContext.showToast) {
+        editContext.showToast("Failed to update date/time. Please try again.");
+      }
+    } finally {
+      setIsUpdating(false);
+    }
+  };
+
+  const handleDateSelect = async (selectedDate: Date | undefined) => {
+    setDate(selectedDate);
+    await updateDateTime(selectedDate, time);
+  };
+
+  const handleHoursChange = async (newHours: number) => {
+    setHours(newHours);
+    const newTime = `${newHours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}`;
+    setTime(newTime);
+    if (date) {
+      await updateDateTime(date, newTime);
+    }
+  };
+
+  const handleMinutesChange = async (newMinutes: number) => {
+    setMinutes(newMinutes);
+    const newTime = `${hours.toString().padStart(2, "0")}:${newMinutes.toString().padStart(2, "0")}`;
+    setTime(newTime);
+    if (date) {
+      await updateDateTime(date, newTime);
+    }
+  };
+
+  return (
+    <div className="flex items-center gap-2">
+      <Popover enableIframeClickDetection={false}>
+        <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">
+          <div
+            className="p-3"
+            onMouseDown={(e) => e.stopPropagation()}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <Calendar
+              mode="single"
+              selected={date}
+              onSelect={handleDateSelect}
+            />
+          </div>
+        </PopoverContent>
+      </Popover>
+
+      <div
+        className={cn(
+          "bg-gray-5 flex items-center justify-start gap-1 px-2 text-left text-xs font-normal",
+          !date && "text-muted-foreground",
+        )}
+      >
+        <Clock className="text-muted-foreground h-4 w-4" />
+
+        {/* Hours Dropdown */}
+        <Popover enableIframeClickDetection={false}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="ghost"
+              className="bg-gray-5 h-8 w-12 p-1 text-xs"
+              disabled={readOnly || !date}
+            >
+              {hours.toString().padStart(2, "0")}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto p-2" align="start">
+            <div
+              className="grid max-h-48 grid-cols-4 gap-1 overflow-y-auto"
+              onMouseDown={(e) => e.stopPropagation()}
+              onClick={(e) => e.stopPropagation()}
+            >
+              {Array.from({ length: 24 }, (_, i) => (
+                <Button
+                  key={i}
+                  variant={hours === i ? "default" : "ghost"}
+                  className="h-8 w-8 p-0 text-xs"
+                  onClick={() => handleHoursChange(i)}
+                >
+                  {i.toString().padStart(2, "0")}
+                </Button>
+              ))}
+            </div>
+          </PopoverContent>
+        </Popover>
+
+        <span className="text-muted-foreground">:</span>
+
+        {/* Minutes Dropdown */}
+        <Popover enableIframeClickDetection={false}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="ghost"
+              className="bg-gray-5 h-8 w-12 p-1 text-xs"
+              disabled={readOnly || !date}
+            >
+              {minutes.toString().padStart(2, "0")}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto p-2" align="start">
+            <div
+              className="grid max-h-48 grid-cols-4 gap-1 overflow-y-auto"
+              onMouseDown={(e) => e.stopPropagation()}
+              onClick={(e) => e.stopPropagation()}
+            >
+              {Array.from({ length: 60 }, (_, i) => (
+                <Button
+                  key={i}
+                  variant={minutes === i ? "default" : "ghost"}
+                  className="h-8 w-8 p-0 text-xs"
+                  onClick={() => handleMinutesChange(i)}
+                >
+                  {i.toString().padStart(2, "0")}
+                </Button>
+              ))}
+            </div>
+          </PopoverContent>
+        </Popover>
+      </div>
+    </div>
+  );
+}

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

@@ -128,7 +128,7 @@ export function InternalLinkFieldEditor({
                 selectedItemId={
                   link?.itemId ? normalizeKey(link.itemId) : undefined
                 }
-                rootItemId={rootItemIds[0]}
+                rootItemIds={rootItemIds}
                 expandedItemId={
                   link?.itemId ? normalizeKey(link.itemId) : undefined
                 }

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

@@ -44,6 +44,7 @@ export default function TreeListEditor({
   const [hoveredItemId, setHoveredItemId] = useState<string | undefined>();
   const [hoveredItem, setHoveredItem] = useState<FullItem | undefined>();
   const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
+  const [lastClickedIndex, setLastClickedIndex] = useState<number | null>(null);
 
   if (!editContext) return;
 
@@ -193,10 +194,15 @@ export default function TreeListEditor({
   };
 
   return (
-    <div className="focus-shadow border border-gray-200">
-      <div className="bg-gray-5 border-b border-gray-200 p-2">
+    <div
+      className={`focus-shadow border border-gray-200 ${readOnly ? "bg-gray-5" : ""}`}
+    >
+      <div
+        className={`border-b border-gray-200 p-2 ${readOnly ? "bg-gray-5" : "bg-gray-5"}`}
+      >
         <ItemSearch
           rootItemIds={rootItemIds.map((x) => normalizeGuid(x))}
+          disabled={readOnly}
           itemSelected={async (item) => {
             addToList([
               {
@@ -212,7 +218,9 @@ export default function TreeListEditor({
       </div>
       <Splitter className="h-60">
         <SplitterPanel size={50} className="relative">
-          <div className="absolute inset-0 overflow-auto">
+          <div
+            className={`absolute inset-0 overflow-auto ${readOnly ? "bg-gray-5" : ""}`}
+          >
             <ContentTree
               expandIdPath={hoveredItem?.idPath}
               language={editContext.currentItemDescriptor?.language ?? "en"}
@@ -238,7 +246,9 @@ export default function TreeListEditor({
         <SplitterPanel>
           <div className="relative h-full w-full">
             <div className="absolute inset-0 flex">
-              <div className="flex flex-col justify-center gap-1 bg-gray-100 p-1">
+              <div
+                className={`flex flex-col justify-center gap-1 p-1 ${readOnly ? "bg-gray-5" : "bg-gray-100"}`}
+              >
                 <SimpleIconButton
                   label="Add"
                   icon="pi pi-angle-right"
@@ -253,14 +263,19 @@ export default function TreeListEditor({
                 />
               </div>
               <div className="relative h-full flex-1">
-                <div className="absolute inset-0 overflow-auto bg-white text-xs">
+                <div
+                  className={`absolute inset-0 overflow-auto text-xs ${readOnly ? "bg-gray-5" : "bg-white"}`}
+                >
                   {values.length === 0 ? (
                     <div className="p-3 text-center text-gray-500">
                       None selected
                     </div>
                   ) : (
                     values.map((option, index) => (
-                      <Tooltip key={option.id} delayDuration={1000}>
+                      <Tooltip
+                        key={`${option.id}-${index}`}
+                        delayDuration={1000}
+                      >
                         <TooltipTrigger asChild>
                           <div
                             draggable={!readOnly}
@@ -276,12 +291,27 @@ export default function TreeListEditor({
                               !readOnly ? "cursor-move" : ""
                             }`}
                             onClick={(e) => {
-                              if (e.ctrlKey) {
+                              if (e.shiftKey && lastClickedIndex !== null) {
+                                // Range selection mode when Shift is pressed
+                                const startIndex = Math.min(
+                                  lastClickedIndex,
+                                  index,
+                                );
+                                const endIndex = Math.max(
+                                  lastClickedIndex,
+                                  index,
+                                );
+                                const rangeItems = values.slice(
+                                  startIndex,
+                                  endIndex + 1,
+                                );
+                                setSelectedFromList(rangeItems);
+                              } else if (e.ctrlKey) {
                                 // Multi-select mode when Ctrl is pressed
                                 if (selectedFromList.includes(option)) {
                                   setSelectedFromList(
                                     selectedFromList.filter(
-                                      (item) => item.id !== option.id,
+                                      (item) => item !== option,
                                     ),
                                   );
                                 } else {
@@ -290,6 +320,7 @@ export default function TreeListEditor({
                                     option,
                                   ]);
                                 }
+                                setLastClickedIndex(index);
                               } else {
                                 // Single-select mode when Ctrl is not pressed
                                 if (
@@ -298,9 +329,11 @@ export default function TreeListEditor({
                                 ) {
                                   // Deselect if this is the only selected item
                                   setSelectedFromList([]);
+                                  setLastClickedIndex(null);
                                 } else {
                                   // Replace selection with just this item
                                   setSelectedFromList([option]);
+                                  setLastClickedIndex(index);
                                 }
                               }
                             }}

package/src/editor/fieldTypes.ts

@@ -128,6 +128,14 @@ export type DateFieldValue = {
   date: string;
 };
 
+export type DateTimeField = Field & {
+  value: DateTimeFieldValue;
+};
+
+export type DateTimeFieldValue = {
+  date: string;
+};
+
 export type NumberField = Field & {
   value: number;
 };

package/src/editor/menubar/ToolbarFactory.tsx

@@ -13,7 +13,8 @@ export function createEditToolbar(editContext: EditContextType) {
   if (!editContext) return null;
 
   const hasLayout = editContext.contentEditorItem?.hasLayout;
-  const isReviewsView = editContext.viewName === "reviews";
+  const isReviewsView =
+    editContext.viewName === "reviews" || editContext.viewName === "comments";
 
   // For items without layout (simple content editor)
   if (!hasLayout) {

package/src/editor/menubar/toolbar-sections/EditControls.tsx

@@ -2,7 +2,17 @@ import { useEditContext } from "../../client/editContext";
 import { SimpleIconButton } from "../../ui/SimpleIconButton";
 import { EyeIcon, MessagesSquare, Pencil } from "lucide-react";
 
-export function EditControls() {
+interface EditControlsProps {
+  hideSuggestions?: boolean;
+  hideEdit?: boolean;
+  hidePreview?: boolean;
+}
+
+export function EditControls({
+  hideSuggestions,
+  hideEdit,
+  hidePreview,
+}: EditControlsProps = {}) {
   const editContext = useEditContext();
 
   if (!editContext) return null;
@@ -17,7 +27,7 @@ export function EditControls() {
 
   return (
     <>
-      {!editContext.user?.isLimitedPreviewUser && (
+      {!hideEdit && !editContext.user?.isLimitedPreviewUser && (
         <SimpleIconButton
           icon={<Pencil className="h-6 w-6 p-1" strokeWidth={1} />}
           label="Edit"
@@ -27,28 +37,32 @@ export function EditControls() {
         />
       )}
 
-      <SimpleIconButton
-        icon={<EyeIcon className="h-6 w-6 p-1" strokeWidth={1} />}
-        label="Preview"
-        size="large"
-        selected={editContext.mode === "preview"}
-        onClick={() => editContext.setMode("preview")}
-      />
+      {!hidePreview && (
+        <SimpleIconButton
+          icon={<EyeIcon className="h-6 w-6 p-1" strokeWidth={1} />}
+          label="Preview"
+          size="large"
+          selected={editContext.mode === "preview"}
+          onClick={() => editContext.setMode("preview")}
+        />
+      )}
 
-      <SimpleIconButton
-        className="relative"
-        selected={editContext?.mode === "suggestions"}
-        icon={<MessagesSquare strokeWidth={1} className="h-6 w-6 p-1" />}
-        label="Write suggestions"
-        size="large"
-        onClick={() => editContext?.setMode("suggestions")}
-      >
-        {totalCount > 0 && (
-          <div className="bg-theme-secondary text-3xs absolute -top-1 -right-1 flex h-[16px] min-w-[16px] items-center justify-center rounded-full px-1 text-white">
-            {totalCount > 99 ? "99+" : totalCount}
-          </div>
-        )}
-      </SimpleIconButton>
+      {!hideSuggestions && (
+        <SimpleIconButton
+          className="relative"
+          selected={editContext?.mode === "suggestions"}
+          icon={<MessagesSquare strokeWidth={1} className="h-6 w-6 p-1" />}
+          label="Write suggestions"
+          size="large"
+          onClick={() => editContext?.setMode("suggestions")}
+        >
+          {totalCount > 0 && (
+            <div className="bg-theme-secondary text-3xs absolute -top-1 -right-1 flex h-[16px] min-w-[16px] items-center justify-center rounded-full px-1 text-white">
+              {totalCount > 99 ? "99+" : totalCount}
+            </div>
+          )}
+        </SimpleIconButton>
+      )}
     </>
   );
 }

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

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from "react";
 import { useEditContext } from "../client/editContext";
-import { classNames } from "primereact/utils";
+
 import { MenuItem } from "primereact/menuitem";
 
 import { getAbsoluteIconUrl } from "../utils";

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

@@ -30,7 +30,9 @@ export function EditorForm({
   if (!pageViewContext) pageViewContext = editContext.pageView;
 
   const insertMode =
-    editContext.insertMode && editContext.mode === "edit" && !compareView;
+    (editContext.insertMode || editContext.selectedForInsertion) &&
+    editContext.mode === "edit" &&
+    !compareView;
   const [activeTabKey, setActiveTabKey] = useState(
     initialActiveTab || "content",
   );

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

@@ -15,6 +15,7 @@ export function PageViewer({
   name,
   followEditsDefault,
   className,
+  noMargins,
 }: {
   pageViewContext?: PageViewContext;
   showFormEditor: boolean;
@@ -22,6 +23,7 @@ export function PageViewer({
   name: string;
   followEditsDefault?: boolean;
   className?: string;
+  noMargins?: boolean;
 }) {
   const editContext = useEditContext();
 
@@ -34,6 +36,10 @@ export function PageViewer({
     setFormEditorCollapsed(false);
   }, [editContext?.insertMode, editContext?.activeEditorTab]);
 
+  useEffect(() => {
+    setFormEditorCollapsed(false);
+  }, [editContext?.selection]);
+
   useEffect(() => {
     if (
       followEdits &&
@@ -81,7 +87,13 @@ export function PageViewer({
       defaultSize: 300,
       collapsible: true,
       content: (
-        <div className="h-full w-full py-2 pl-2">
+        <div
+          className={cn(
+            "h-full w-full",
+            noMargins ? "py-2" : "py-2 pl-2",
+            formEditorCollapsed && "hidden",
+          )}
+        >
           <div className="border-gray-3 flex h-full w-full flex-col rounded-md border bg-white">
             <div className="flex-1">
               <EditorForm
@@ -102,11 +114,6 @@ export function PageViewer({
                   label="Follow"
                   onClick={() => setFollowEdits((f) => !f)}
                 />
-                <SimpleIconButton
-                  icon={<PanelLeftClose size={12} />}
-                  label="Collapse"
-                  onClick={() => setFormEditorCollapsed(true)}
-                />
               </div>
             </div>
           </div>
@@ -122,6 +129,11 @@ export function PageViewer({
       <PageViewerFrame
         compareView={compareView || false}
         pageViewContext={pageViewContext}
+        className={cn(
+          "py-2",
+          noMargins ? "pr-0" : "px-2",
+          noMargins && showFormEditor && "ml-2",
+        )}
       />
     ),
   });
@@ -134,15 +146,6 @@ export function PageViewer({
         direction={editContext?.isMobile ? "vertical" : "horizontal"}
         localStorageKey={`editor.pageViewer.${name}`}
       />
-      {formEditorCollapsed && (
-        <div className="absolute bottom-0 left-0 z-10 flex items-center justify-center">
-          <SimpleIconButton
-            icon={<PanelLeftOpen size={12} />}
-            label="Open Form"
-            onClick={() => setFormEditorCollapsed(false)}
-          />
-        </div>
-      )}
     </div>
   );
 }

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

@@ -6,7 +6,7 @@ import { PageEditorChrome } from "../page-editor-chrome/PageEditorChrome";
 import { PageViewContext } from "./pageViewContext";
 import morphdom from "morphdom";
 import uuid from "react-uuid";
-
+import { cn } from "../../lib/utils";
 import {
   findComponentRect,
   findFieldElement,
@@ -42,9 +42,11 @@ declare global {
 export function PageViewerFrame({
   compareView,
   pageViewContext,
+  className,
 }: {
   compareView: boolean;
   pageViewContext?: PageViewContext;
+  className?: string;
 }) {
   const editContext = useEditContext();
 
@@ -761,7 +763,14 @@ export function PageViewerFrame({
       : pageViewContext.deviceHeight || 640;
 
   return (
-    <div className="relative mt-[9px] mr-2 ml-2 flex h-full w-full flex-col items-center select-none">
+    <div
+      className={cn(
+        "relative flex h-full w-full flex-col items-center select-none",
+
+        className,
+        editContext.showRightSidebar && "pr-0",
+      )}
+    >
       {!editContext.pageView.fullscreen && (
         <EditorWarnings item={pageViewContext.page?.item} />
       )}