@alpaca-editor/core 1.0.3848 → 1.0.3849

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

@@ -32,40 +32,47 @@ export function PictureEditorOverlay() {
 
       setElement(pictureElement || undefined);
     },
-    [iframe, editContext]
+    [iframe, editContext],
   );
 
   useEffect(() => {
-    if (element) {
-      const itemId = element.getAttribute("data-itemid");
-      const language = element.getAttribute("data-language");
-      const version = element.getAttribute("data-version");
-      const fieldId = element.getAttribute("data-fieldid");
-
-      if (
-        !itemId ||
-        !language ||
-        !version ||
-        !fieldId ||
-        !pageViewContext?.page ||
-        !iframe?.contentWindow
-      )
-        return;
-
-      const component = getComponentById(itemId, pageViewContext.page!);
-
-      if (component == null) return;
-
-      const pictureField = component.datasourceItem?.fields.find(
-        (f) => f.id === fieldId
-      ) as PictureField;
-
-      if (!pictureField) return;
-
-      setField(pictureField);
-    } else {
-      setField(undefined);
-    }
+    const loadField = async () => {
+      if (element) {
+        const itemId = element.getAttribute("data-itemid");
+        const language = element.getAttribute("data-language");
+        const version = element.getAttribute("data-version");
+        const fieldId = element.getAttribute("data-fieldid");
+
+        if (
+          !itemId ||
+          !language ||
+          !version ||
+          !fieldId ||
+          !pageViewContext?.page ||
+          !iframe?.contentWindow
+        )
+          return;
+
+        const component = getComponentById(itemId, pageViewContext.page!);
+
+        if (component == null) return;
+
+        const item = await editContext!.itemsRepository.getItem(
+          component.datasourceItem!,
+        );
+
+        const pictureField = item?.fields.find(
+          (f) => f.id === fieldId,
+        ) as PictureField;
+
+        if (!pictureField) return;
+
+        setField(pictureField);
+      } else {
+        setField(undefined);
+      }
+    };
+    loadField();
   }, [element, pageViewContext?.page]);
 
   useEffect(() => {
@@ -73,7 +80,7 @@ export function PictureEditorOverlay() {
 
     const sourceELement = getCurrentPictureSource(
       element,
-      iframe.contentWindow
+      iframe.contentWindow,
     );
 
     if (sourceELement) {
@@ -100,7 +107,7 @@ export function PictureEditorOverlay() {
         if (iframe?.contentDocument) {
           iframe?.contentDocument.removeEventListener(
             "mouseenter",
-            onMouseEnter
+            onMouseEnter,
           );
         }
 
@@ -135,7 +142,7 @@ export function PictureEditorOverlay() {
 
 function getCurrentPictureSource(
   pictureElement: HTMLElement,
-  iframeWindow: Window
+  iframeWindow: Window,
 ): HTMLElement | null {
   if (pictureElement.tagName === "IMG") return pictureElement;
 

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

@@ -7,7 +7,7 @@ import { Insert } from "../sidebar/Insert";
 import { useEffect, useState } from "react";
 
 import { SimpleIconButton } from "../ui/SimpleIconButton";
-import { Component, Field, RenderedItem } from "../pageModel";
+import { Component, Field, FullItem, RenderedItem } from "../pageModel";
 import { Spinner } from "../ui/Spinner";
 import { PageViewContext } from "./pageViewContext";
 import { SimpleTabs, Tab } from "../ui/SimpleTabs";
@@ -30,6 +30,7 @@ export function EditorForm({
   const [activeTabKey, setActiveTabKey] = useState("content");
   const [item, setItem] = useState<RenderedItem>();
   const [component, setComponent] = useState<Component>();
+  const [fullItem, setFullItem] = useState<FullItem>();
 
   const toggleInsertMode = () => {
     if (insertMode) {
@@ -39,6 +40,15 @@ export function EditorForm({
     }
   };
 
+  useEffect(() => {
+    async function loadFullItem() {
+      if (!item) return;
+      const fullItem = await editContext!.itemsRepository.getItem(item);
+      setFullItem(fullItem);
+    }
+    loadFullItem();
+  }, [item]);
+
   useEffect(() => {
     if (editContext.selectedForInsertion) setInsertMode(true);
   }, [editContext.selectedForInsertion]);
@@ -83,7 +93,7 @@ export function EditorForm({
     pageViewContext.pageItemDescriptor,
   ]);
 
-  if (!item)
+  if (!fullItem || !item)
     return (
       <div className="grid h-full w-full items-center justify-center">
         <Spinner />
@@ -98,7 +108,7 @@ export function EditorForm({
         x.item.version === item?.version,
     )?.results || [];
 
-  let designFields = Object.values(item?.fields).filter(
+  let designFields = Object.values(fullItem?.fields || []).filter(
     (x) => x.section === "Design" || x.section === "Rendering",
   );
 
@@ -106,7 +116,7 @@ export function EditorForm({
 
   if (editorFields && editorFields["Design"]) {
     editorFields["Design"]?.addFields.forEach((fieldName) => {
-      const field = item?.fields.find((x) => x.name === fieldName);
+      const field = fullItem?.fields.find((x) => x.name === fieldName);
       if (field) designFields.push(field);
     });
     editorFields["Design"]?.removeFields.forEach((fieldName) => {
@@ -116,7 +126,7 @@ export function EditorForm({
 
   const itemFields: ItemFields[] = [];
 
-  const contentFields = Object.values(item?.fields).filter(
+  const contentFields = Object.values(fullItem?.fields || []).filter(
     (x) =>
       ((editorFields && editorFields["Content"]?.addFields.includes(x.name!)) ||
         item.renderedFieldIds.indexOf(x.id) >= 0) &&
@@ -131,7 +141,9 @@ export function EditorForm({
     .forEach((i) => {
       const fields: Field[] = [];
       i.renderedFieldIds.forEach((id) => {
-        const field = Object.values(i?.fields).find((x) => x.id === id);
+        const field = Object.values(fullItem?.fields || []).find(
+          (x) => x.id === id,
+        );
         if (field) fields.push(field);
       });
       if (fields.length > 0) itemFields.push({ headline: i.name, fields });
@@ -164,7 +176,7 @@ export function EditorForm({
   if (editorFields) {
     Object.keys(editorFields).forEach((key) => {
       if (key !== "Content" && key !== "Design") {
-        const fields = item?.fields.filter((x) =>
+        const fields = fullItem?.fields.filter((x) =>
           editorFields[key]?.addFields.includes(x.name!),
         );
         if (fields?.length)
@@ -183,9 +195,9 @@ export function EditorForm({
     content: (
       <div className="relative h-full">
         <div className="absolute inset-0 overflow-auto">
-          <ItemInfo item={item} />
+          <ItemInfo item={fullItem} />
           <FieldList
-            fields={[{ fields: item.fields }]}
+            fields={[{ fields: fullItem?.fields || [] }]}
             validators={validators}
             showStandardFieldsEnabled={true}
             readonly={readonly}
@@ -231,7 +243,7 @@ export function EditorForm({
           size="large"
           disabled={
             !editContext.page?.item.canWriteItem ||
-            !item?.canWriteItem ||
+            !fullItem?.canWriteItem ||
             editContext.mode !== "edit" ||
             compareView
           }

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

@@ -511,15 +511,13 @@ export function PageViewerFrame({
 
       const fieldButtons = field ? await loadFieldButtons(field) : [];
 
-      if (
-        showComponentContextMenu(
-          selectedComponents,
-          editContextRef.current!,
-          field,
-          fieldButtons,
-        )(adjustedEvent)
-      ) {
-      }
+      const showMenu = await showComponentContextMenu(
+        selectedComponents,
+        editContextRef.current!,
+        field,
+        fieldButtons,
+      );
+      if (showMenu) showMenu(adjustedEvent);
     };
 
     const handleLoad = () => {

package/src/editor/pageModel.ts

@@ -110,6 +110,14 @@ export type Timings = {
   [key: string]: number;
 };
 
+export type ItemStub = ItemDescriptor & {
+  name: string;
+  templateId: string;
+  templateName: string;
+  icon: string;
+  path: string;
+};
+
 export type FullItem = ItemDescriptor & {
   descriptor: ItemDescriptor;
   name: string;
@@ -144,7 +152,7 @@ export type Page = {
   rootComponent: Component;
 };
 
-export type RenderedItem = RenderedItemSkeleton & FullItem;
+export type RenderedItem = RenderedItemSkeleton & ItemStub;
 
 type EditorFields = {
   [group: string]: {

package/src/editor/services/contentService.ts

@@ -7,7 +7,7 @@ import {
   Site,
   WorkboxItem,
 } from "../../types";
-import { FullItem, ItemDescriptor } from "../pageModel";
+import { FullItem, ItemDescriptor, ItemStub } from "../pageModel";
 
 export type ItemTreeNodeData = {
   id: string;
@@ -34,7 +34,7 @@ export async function getChildren(
   templateIds: string[] = [],
   includeEmbeddedItems: boolean,
   language: string,
-  include?: string
+  include?: string,
 ): Promise<ItemTreeNodeData[]> {
   let url =
     // configuration.services.editorService.baseUrl +
@@ -91,7 +91,7 @@ export async function getChildren(
 // }
 
 export async function fetchItems(
-  itemDescriptors: ItemDescriptor[]
+  itemDescriptors: ItemDescriptor[],
 ): Promise<FullItem[] | undefined> {
   let url = "/alpaca/editor/items";
 
@@ -99,6 +99,15 @@ export async function fetchItems(
   return response.data || [];
 }
 
+export async function fetchItemStubs(
+  itemDescriptors: ItemDescriptor[],
+): Promise<ItemStub[] | undefined> {
+  let url = "/alpaca/editor/itemstubs";
+
+  const response = await post<ItemStub[]>(url, itemDescriptors);
+  return response.data || [];
+}
+
 export async function getSites() {
   return await get<Site[]>("/alpaca/editor/sites");
 }
@@ -106,7 +115,7 @@ export async function getSites() {
 export async function resolvePageAndSite(
   itemId: string,
   language: string,
-  version: number
+  version: number,
 ): Promise<
   | { pageItem: ItemDescriptor; site: { name: string }; isHeadless: boolean }
   | undefined
@@ -130,7 +139,7 @@ export async function resolvePageAndSite(
 export async function getLanguagesAndVersions(item: ItemDescriptor) {
   return await post<LanguagesAndVersions>(
     "/alpaca/editor/getLanguagesAndVersions",
-    item
+    item,
   );
 }
 
@@ -149,7 +158,7 @@ export async function getDictionary(siteName: string, language: string) {
     "/alpaca/editor/dictionary/index?siteName=" +
       siteName +
       "&language=" +
-      language
+      language,
   );
   return response.data as EditableDictionary;
 }

package/src/editor/sidebar/ComponentTree.tsx

@@ -277,7 +277,7 @@ export function ComponentTree({}) {
   );
 
   // Handle tree context menu
-  const handleTreeContextMenu = (
+  const handleTreeContextMenu = async (
     node: TreeNode<Component>,
     event: React.MouseEvent,
   ) => {
@@ -308,7 +308,7 @@ export function ComponentTree({}) {
       selectedEntities = [nodeDictionary[node.key]!.data as Component];
     }
 
-    let commands = getComponentCommands(
+    let commands = await getComponentCommands(
       selectedEntities,
       editContextRef.current!,
     );

package/src/revision.ts

@@ -1,2 +1,2 @@
-export const version = "1.0.3848";
-export const buildDate = "2025-04-26 20:59:41";
+export const version = "1.0.3849";
+export const buildDate = "2025-04-27 12:30:47";