@alpaca-editor/core 1.0.4008 → 1.0.4010

package/src/editor/client/editContext.ts

@@ -182,7 +182,7 @@ export type EditContextType = {
     mode: MediaSelectorMode;
   }) => Promise<string | null>;
 
-  updateUrl: (params: Record<string, string>) => void;
+  updateUrl: (params: Record<string, string | undefined>) => void;
 
   selection: string[];
   select: (ids: string[]) => void;
@@ -337,32 +337,32 @@ export type EditContextType = {
 
   openDialog: OpenDialog;
 
-  pageWizard: {
-    wizard: Wizard | undefined;
-    setWizard: React.Dispatch<React.SetStateAction<Wizard | undefined>>;
-    parentItem: ItemDescriptor | undefined;
-    setParentItem: React.Dispatch<
-      React.SetStateAction<ItemDescriptor | undefined>
-    >;
-    // Wizard step state
-    currentStepIndex: number;
-    setCurrentStepIndex: React.Dispatch<React.SetStateAction<number>>;
-    data: WizardData;
-    setData: React.Dispatch<React.SetStateAction<WizardData>>;
-    pageModel: WizardPageModel;
-    setPageModel: React.Dispatch<React.SetStateAction<WizardPageModel>>;
-    internalState: any;
-    setInternalState: React.Dispatch<React.SetStateAction<any>>;
-    stepCompleted: number;
-    setStepCompleted: React.Dispatch<React.SetStateAction<number>>;
-    pageItem: ItemDescriptor | undefined;
-    setPageItem: React.Dispatch<
-      React.SetStateAction<ItemDescriptor | undefined>
-    >;
-    beforeNextCallbackRef: React.MutableRefObject<
-      (() => Promise<boolean>) | null
-    >;
-  };
+  // pageWizard: {
+  //   wizard: Wizard | undefined;
+  //   setWizard: React.Dispatch<React.SetStateAction<Wizard | undefined>>;
+  //   parentItem: ItemDescriptor | undefined;
+  //   setParentItem: React.Dispatch<
+  //     React.SetStateAction<ItemDescriptor | undefined>
+  //   >;
+  //   // Wizard step state
+  //   currentStepIndex: number;
+  //   setCurrentStepIndex: React.Dispatch<React.SetStateAction<number>>;
+  //   data: WizardData;
+  //   setData: React.Dispatch<React.SetStateAction<WizardData>>;
+  //   pageModel: WizardPageModel;
+  //   setPageModel: React.Dispatch<React.SetStateAction<WizardPageModel>>;
+  //   internalState: any;
+  //   setInternalState: React.Dispatch<React.SetStateAction<any>>;
+  //   stepCompleted: number;
+  //   setStepCompleted: React.Dispatch<React.SetStateAction<number>>;
+  //   pageItem: ItemDescriptor | undefined;
+  //   setPageItem: React.Dispatch<
+  //     React.SetStateAction<ItemDescriptor | undefined>
+  //   >;
+  //   beforeNextCallbackRef: React.MutableRefObject<
+  //     (() => Promise<boolean>) | null
+  //   >;
+  // };
 
   webSocketMessages: WebSocketMessage[];
   clearWebSocketMessages: () => void;
@@ -370,6 +370,8 @@ export type EditContextType = {
   setUserPreferences: (preferences: Partial<UserPreferences>) => void;
   favorites: any[];
   loadFavorites: () => Promise<void>;
+  currentWizardId: string | null;
+  setCurrentWizardId: (wizardId: string | null) => void;
 };
 
 const EditContext = React.createContext<EditContextType | undefined>(undefined);

package/src/editor/client/operations.ts

@@ -208,7 +208,7 @@ export function getOperationsContext(
       if (result.type == "error") {
         console.log("error locking field", result);
       }
-      //handleErrorResult(result, ui, state);
+      if (handleErrorResult(result, ui, state)) return false;
       if (result.type == "success" && result.data.success) {
         state.setLockedField(field);
         return true;

package/src/editor/componentTreeHelper.tsx

@@ -93,6 +93,7 @@ export function getAllPlaceholders(page: Page) {
     });
   };
   addPlaceholders(page.rootComponent.placeholders);
+
   return placeholders;
 }
 

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

@@ -1,17 +1,22 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
-import { ChevronDown } from "lucide-react";
+import { ChevronDown, Trash } from "lucide-react";
 
 import { Link } from "../LinkEditorDialog";
 import { useEditContext } from "../client/editContext";
-import ContentTree from "../ContentTree";
+import { ScrollingContentTree } from "../ScrollingContentTree";
 
 import { InternalLinkField } from "../fieldTypes";
 import { getLookupSources } from "../services/editService";
 import { classNames } from "primereact/utils";
 import ItemSearch from "../ui/ItemSearch";
 import { normalizeGuid } from "../utils";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../components/ui/popover";
 
 export function InternalLinkFieldEditor({
   field,
@@ -38,10 +43,6 @@ export function InternalLinkFieldEditor({
     });
   }, [field]);
 
-  const dropdownRef = useRef<HTMLDivElement>(null);
-  const texboxRef = useRef<HTMLDivElement>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-
   if (!editContext) return;
 
   // Helper function to normalize GUID formats for comparison
@@ -49,11 +50,6 @@ export function InternalLinkFieldEditor({
     return key.toLowerCase().replace(/[{}]/g, "");
   };
 
-  const selection = [];
-  if (link?.itemId) {
-    selection.push(normalizeKey(link.itemId));
-  }
-
   useEffect(() => {
     const loadLookupSources = async () => {
       const datasources = await getLookupSources(field, editContext.sessionId);
@@ -70,119 +66,50 @@ export function InternalLinkFieldEditor({
       field.descriptor.item.version,
   ]);
 
-  // Close overlay when clicking outside
-  useEffect(() => {
-    if (!showTree) return;
-
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(event.target as Node) &&
-        texboxRef.current &&
-        !texboxRef.current.contains(event.target as Node)
-      ) {
-        setShowTree(false);
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [showTree]);
-
-  // Close overlay when parent containers scroll to prevent misalignment
-  useEffect(() => {
-    if (!showTree) return;
-
-    const handleScroll = () => {
-      setShowTree(false);
-    };
-
-    // Find scrollable parent elements
-    const scrollableParents: Element[] = [];
-    let element = texboxRef.current?.parentElement;
-
-    while (element) {
-      const computedStyle = window.getComputedStyle(element);
-      const overflowY = computedStyle.overflowY;
-      const overflowX = computedStyle.overflowX;
-
-      if (
-        overflowY === "auto" ||
-        overflowY === "scroll" ||
-        overflowX === "auto" ||
-        overflowX === "scroll"
-      ) {
-        scrollableParents.push(element);
-      }
-      element = element.parentElement;
-    }
-
-    // Also listen to window scroll
-    scrollableParents.push(window as any);
-
-    // Add scroll listeners
-    scrollableParents.forEach((parent) => {
-      parent.addEventListener("scroll", handleScroll, { passive: true });
-    });
-
-    return () => {
-      scrollableParents.forEach((parent) => {
-        parent.removeEventListener("scroll", handleScroll);
-      });
-    };
-  }, [showTree]);
-
   return (
     <div className="relative">
-      <div
-        ref={texboxRef}
-        className={classNames(
-          "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;
-          setShowTree((show) => !show);
-          e.preventDefault();
-        }}
-      >
-        {link?.targetItemName ? (
-          <span>{link.targetItemName}</span>
-        ) : (
-          <span>&nbsp;</span>
-        )}
+      <Popover open={showTree} onOpenChange={setShowTree}>
+        <PopoverTrigger asChild disabled={readOnly}>
+          <div
+            className={classNames(
+              "justiy-between focus-shadow bg-gray-5 flex cursor-pointer justify-between border p-1.5 text-xs",
+              readOnly ? "cursor-default bg-gray-100" : "",
+            )}
+          >
+            {link?.targetItemName ? (
+              <span>{link.targetItemName}</span>
+            ) : (
+              <span>&nbsp;</span>
+            )}
+            {!readOnly && (
+              <ChevronDown
+                strokeWidth={1}
+                className={`h-4 w-4 transition-transform duration-200 ${
+                  showTree ? "rotate-180" : "rotate-0"
+                }`}
+              />
+            )}
+          </div>
+        </PopoverTrigger>
+
         {!readOnly && (
-          <ChevronDown
-            strokeWidth={1}
-            className={`h-4 w-4 transition-transform duration-200 ${
-              showTree ? "rotate-180" : "rotate-0"
-            }`}
-          />
-        )}
-      </div>
+          <PopoverContent className="w-96 p-0" align="start" side="bottom">
+            <div className="border-b border-gray-200 bg-white p-2">
+              <ItemSearch
+                rootItemIds={rootItemIds.map((x) => normalizeGuid(x))}
+                autoFocus={true}
+                itemSelected={(item) => {
+                  setShowTree(false);
+                  editContext?.operations.editField({
+                    field: field.descriptor,
+                    rawValue: item.id,
+                  });
+                }}
+              />
+            </div>
 
-      {showTree && (
-        <div
-          ref={dropdownRef}
-          className="absolute top-full left-0 z-50 mt-1 border border-gray-200 bg-white shadow-lg"
-          style={{ width: `${texboxRef.current?.offsetWidth || 100}px` }}
-        >
-          <div className="border-b border-gray-200 bg-white p-2">
-            <ItemSearch
-              rootItemIds={rootItemIds.map((x) => normalizeGuid(x))}
-              autoFocus={true}
-              itemSelected={(item) => {
-                setShowTree(false);
-                editContext?.operations.editField({
-                  field: field.descriptor,
-                  rawValue: item.id,
-                });
-              }}
-            />
-          </div>
-          <div className="border-b border-gray-200 bg-gray-50 p-2">
             <button
-              className="w-full rounded px-2 py-1 text-left text-sm text-gray-600 hover:bg-gray-100"
+              className="w-full cursor-pointer rounded border-b bg-gray-50 p-1 px-4 text-left text-xs hover:bg-gray-100"
               onClick={() => {
                 setShowTree(false);
                 editContext?.operations.editField({
@@ -191,32 +118,32 @@ export function InternalLinkFieldEditor({
                 });
               }}
             >
-              — No selection —
+              <div className="flex items-center gap-2">
+                <Trash className="h-4 w-4" strokeWidth={1} /> Clear
+              </div>
             </button>
-          </div>
-          <div
-            ref={containerRef}
-            className="h-64 overflow-auto border-x border-b p-2"
-          >
-            <ContentTree
-              language={editContext.contentEditorItem!.language}
-              expandIdPath={link?.targetItemLongId}
-              rootItemIds={rootItemIds}
-              selectionMode="single"
-              selectedItemIds={selection}
-              scrollToSelected={showTree}
-              disableAutoSelectOnExpand={true}
-              onSelectionChange={(nodes) => {
-                setShowTree(false);
-                editContext?.operations.editField({
-                  field: field.descriptor,
-                  rawValue: nodes[0]?.id,
-                });
-              }}
-            />
-          </div>
-        </div>
-      )}
+
+            <div className="relative h-64 border-x border-b">
+              <ScrollingContentTree
+                selectedItemId={
+                  link?.itemId ? normalizeKey(link.itemId) : undefined
+                }
+                rootItemId={rootItemIds[0]}
+                expandedItemId={
+                  link?.itemId ? normalizeKey(link.itemId) : undefined
+                }
+                onSelectionChange={(nodes) => {
+                  setShowTree(false);
+                  editContext?.operations.editField({
+                    field: field.descriptor,
+                    rawValue: nodes[0]?.id,
+                  });
+                }}
+              />
+            </div>
+          </PopoverContent>
+        )}
+      </Popover>
     </div>
   );
 }

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

@@ -71,63 +71,90 @@ export function PlaceholderDropZones({
       "[data-placeholder-start='" + placeholder.key + "']",
     );
 
+    let isUsingParentBounds = false;
+
     if (!placeholderElement && placeholder.components.length > 0) {
       placeholderElement = placeholder.components[0]?.firstDOMElement;
     }
 
-    if (!placeholderElement) return;
-
-    const prev = getPreviousElement(placeholderElement);
-
-    const nextOrParent =
-      getNextElement(placeholderElement) || placeholderElement.parentElement;
-
-    let orientation = placeholderElement?.getAttribute("data-orientation");
+    // For empty placeholders, use parent component bounds as last resort
+    if (!placeholderElement && placeholder.parentComponent) {
+      placeholderElement = placeholder.parentComponent.firstDOMElement;
+      isUsingParentBounds = true;
+    }
 
-    if (!orientation)
-      orientation = detectOrientation(
-        placeholderElement,
-        placeholder.components,
-      );
+    if (!placeholderElement) return;
 
-    const rect = (prev ?? nextOrParent)!.getBoundingClientRect();
     const zoom = pageViewContext.zoom;
-
-    const position =
-      orientation === "horizontal"
-        ? {
-            x: (prev ? rect.x + rect.width : rect.x) * zoom,
-            y: (rect.y + rect.height / 2) * zoom,
-          }
-        : {
-            x: (rect.x + rect.width / 2) * zoom,
-            y: (prev ? rect.y + rect.height : rect.y) * zoom,
-          };
-
+    let position: { x: number; y: number };
+    let anchor: "top" | "bottom" | "left" | "right" = "top";
     let index = 0;
 
     const description = placeholderElement.getAttribute("data-description");
 
-    let anchor: "top" | "bottom" | "left" | "right" = "top";
+    let referenceElement: Element;
+    let orientation: string | null = null;
+
+    // Special handling for empty placeholders using parent bounds
+    if (isUsingParentBounds) {
+      const rect = placeholderElement.getBoundingClientRect();
+      // Center the drop zone in the middle of the parent
+      position = {
+        x: (rect.x + rect.width / 2) * zoom,
+        y: (rect.y + rect.height / 2) * zoom,
+      };
+      anchor = "top"; // Default anchor for centered position
+      referenceElement = placeholderElement;
+      orientation = "vertical"; // Default for centered placeholders
+    } else {
+      // Original positioning logic for normal placeholders
+      const prev = getPreviousElement(placeholderElement);
+
+      const nextOrParent =
+        getNextElement(placeholderElement) || placeholderElement.parentElement;
+
+      orientation = placeholderElement?.getAttribute("data-orientation");
+
+      if (!orientation)
+        orientation = detectOrientation(
+          placeholderElement,
+          placeholder.components,
+        );
+
+      const rect = (prev ?? nextOrParent)!.getBoundingClientRect();
+
+      position =
+        orientation === "horizontal"
+          ? {
+              x: (prev ? rect.x + rect.width : rect.x) * zoom,
+              y: (rect.y + rect.height / 2) * zoom,
+            }
+          : {
+              x: (rect.x + rect.width / 2) * zoom,
+              y: (prev ? rect.y + rect.height : rect.y) * zoom,
+            };
+
+      if (prev && orientation === "horizontal") {
+        anchor = "right";
+      }
+      if (prev && orientation !== "horizontal") {
+        anchor = "bottom";
+      }
+      if (!prev && orientation === "horizontal") {
+        anchor = "left";
+      }
+      if (!prev && orientation !== "horizontal") {
+        anchor = "top";
+      }
 
-    if (prev && orientation === "horizontal") {
-      anchor = "right";
-    }
-    if (prev && orientation !== "horizontal") {
-      anchor = "bottom";
-    }
-    if (!prev && orientation === "horizontal") {
-      anchor = "left";
-    }
-    if (!prev && orientation !== "horizontal") {
-      anchor = "top";
+      referenceElement = prev ?? nextOrParent!;
     }
 
     zones.push({
       placeholder,
       position,
       index,
-      element: prev ?? nextOrParent!,
+      element: referenceElement,
       anchor,
       description,
     });

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

@@ -47,7 +47,7 @@ export function PageViewer({
 
       if (!lastEdit) return;
 
-      if (!lastEdit.user.ai && lastEdit.user.name == editContext.user?.name)
+      if (!lastEdit.user.ai || lastEdit.user.name !== editContext.user?.name)
         return;
 
       if (editContext.selection.indexOf(lastEdit.item.id) === -1) {

package/src/editor/page-viewer/pageModelSkeletonBuilder.ts

@@ -180,7 +180,27 @@ export function buildPageModelSkeleton(
           currentPlaceholder.components.push(currentComponent);
         }
       }
-      currentPlaceholder = undefined;
+
+      // Check if the new component should have an implicit placeholder
+      const hasImplicitPlaceholder =
+        element.getAttribute("data-has-implicit-placeholder") === "true";
+
+      if (hasImplicitPlaceholder && currentComponent) {
+        // Add an implicit placeholder to the newly created component
+        const implicitPlaceholder: PlaceholderSkeleton = {
+          key: "implicit_" + currentComponent.datasourceItem?.id,
+          name: "Implicit placeholder: " + currentComponent.datasourceItem?.id,
+          description: "",
+          components: [],
+          parentComponent: currentComponent,
+          editable: element.getAttribute("data-editable") !== "false",
+        };
+
+        currentComponent.placeholders.push(implicitPlaceholder);
+        currentPlaceholder = implicitPlaceholder;
+      } else {
+        currentPlaceholder = undefined;
+      }
       return currentComponent;
     }
   };
@@ -422,6 +442,6 @@ export function buildPageModelSkeleton(
 
   const time = performance.now() - start;
 
-  console.log("PAGE MODEL SKELETON", page, time);
+  console.log("PAGE MODEL SKELETON: ", page, time);
   pageViewContextRef.current?.setPageSkeleton(page);
 }

package/src/editor/services/contentService.ts

@@ -8,7 +8,7 @@ import {
   WorkboxItem,
   ContentEditorWarning,
 } from "../../types";
-import { FullItem, ItemDescriptor, ItemStub } from "../pageModel";
+import { FullItem, ItemDescriptor, ItemStub, Language } from "../pageModel";
 
 export type Thumbnail = {
   id: string;
@@ -236,5 +236,11 @@ export type RichTextProfileResponse = {
 };
 
 export async function getRichTextProfile(itemPath: string) {
-  return await post<RichTextProfileResponse>(`/alpaca/editor/RichTextProfile`, {profile: itemPath});
-}
+  return await post<RichTextProfileResponse>(`/alpaca/editor/RichTextProfile`, {
+    profile: itemPath,
+  });
+}
+
+export async function getLanguages() {
+  return await get<Language[]>("/alpaca/editor/languages");
+}

package/src/editor/sidebar/MainContentTree.tsx

@@ -77,6 +77,7 @@ export function MainContentTree({
       <div className="relative flex-1">
         <div className="absolute inset-1 overflow-auto">
           <ContentTree
+            enableDragAndDrop={mode == "normal"}
             language={editContext.currentItemDescriptor?.language ?? "en"}
             rootItemId={rootItemId ?? "{11111111-1111-1111-1111-111111111111}"}
             expandIdPath={
@@ -102,6 +103,7 @@ export function MainContentTree({
             }}
             showGrabCursorForDraggableNodes={mode === "insert-component"}
             isDraggable={isDraggable}
+            enableContextMenu={mode === "normal"}
             renderNode={(node, defaultRenderer) => (
               <div className="group flex w-full gap-4">
                 {defaultRenderer(node)}