@alpaca-editor/core 1.0.3847 → 1.0.3849

package/src/editor/commands/componentCommands.tsx

@@ -42,43 +42,43 @@ export type ComponentCommand = Command<ComponentCommandData> & {
 const isPlaceholder = (x: any): x is Placeholder => x.components !== undefined;
 const defaultIconSize = 16;
 
-export function getSelectedComponentCommands(editContext: EditContextType) {
-  const selection = editContext.selection;
+// export function getSelectedComponentCommands(editContext: EditContextType) {
+//   const selection = editContext.selection;
 
-  const selectedComponents = selection
-    .map((x) => getComponentById(x, editContext.page!))
-    .filter((x) => x) as Component[];
+//   const selectedComponents = selection
+//     .map((x) => getComponentById(x, editContext.page!))
+//     .filter((x) => x) as Component[];
 
-  const componentCommands = getComponentCommands(
-    selectedComponents,
-    editContext,
-  );
+//   const componentCommands = getComponentCommands(
+//     selectedComponents,
+//     editContext,
+//   );
 
-  const componentCommandMenuItems = componentCommands.filter(
-    (x) => x.visibilityScopes.indexOf("menu") >= 0,
-  );
+//   const componentCommandMenuItems = componentCommands.filter(
+//     (x) => x.visibilityScopes.indexOf("menu") >= 0,
+//   );
 
-  return componentCommandMenuItems;
-}
+//   return componentCommandMenuItems;
+// }
 
-export function getComponentCommands(
+export async function getComponentCommands(
   entities: (Placeholder | Component)[],
   editContext: EditContextType,
-): ComponentCommand[] {
+): Promise<ComponentCommand[]> {
   const components = entities.filter(
     (x) => x && !isPlaceholder(x),
   ) as Component[];
 
   const commands = [
-    getCreateCommentCommand(components),
-    getInsertCommand(components, editContext),
-    getDeleteCommand(components, editContext),
-    getDuplicateCommand(components, editContext),
-    getSyncCommand(entities, editContext),
-    getAiCommand(editContext),
-    getDesignCommand(components, editContext),
-    getLinkToMasterCommand(components, editContext),
-    getInheritChildrenFromMasterCommand(components, editContext),
+    await getCreateCommentCommand(components),
+    await getInsertCommand(components, editContext),
+    await getDeleteCommand(components, editContext),
+    await getDuplicateCommand(components, editContext),
+    await getSyncCommand(entities, editContext),
+    await getAiCommand(editContext),
+    await getDesignCommand(components, editContext),
+    await getLinkToMasterCommand(components, editContext),
+    await getInheritChildrenFromMasterCommand(components, editContext),
   ];
 
   return commands.filter((x) => x !== null);
@@ -146,19 +146,18 @@ function getAiCommand(editContext: EditContextType): ComponentCommand {
   };
 }
 
-function getDesignCommand(
+async function getDesignCommand(
   components: Component[],
   editContext: EditContextType,
-): ComponentCommand | null {
+): Promise<ComponentCommand | null> {
   if (components.length !== 1 || isPlaceholder(components[0])) return null;
-  const item = components[0];
+  const component = components[0];
+  if (!component || !component.datasourceItem) return null;
+  const item = await editContext.itemsRepository.getItem(
+    component.datasourceItem,
+  );
   if (!item) return null;
-  if (!item.datasourceItem?.fields) return null;
-  if (
-    !Object.values(item.datasourceItem.fields).find(
-      (x) => x.section === "Design",
-    )
-  )
+  if (!Object.values(item.fields).find((x) => x.section === "Design"))
     return null;
 
   return {
@@ -168,7 +167,7 @@ function getDesignCommand(
     disabled: () => false,
     execute: async (context: CommandContext<any>) => {
       editContext.showFieldEditorPopup(
-        item.datasourceItem?.fields || [],
+        item.fields || [],
         ["Design", "Rendering"],
         context.event!,
       );
@@ -177,10 +176,10 @@ function getDesignCommand(
   };
 }
 
-function getLinkToMasterCommand(
+async function getLinkToMasterCommand(
   components: Component[],
   editContext: EditContextType,
-): ComponentCommand | null {
+): Promise<ComponentCommand | null> {
   if (!components.length) return null;
   if (editContext.page?.item?.masterLanguages?.length === 0) return null;
 
@@ -192,21 +191,22 @@ function getLinkToMasterCommand(
   );
 }
 
-function getCheckboxCommand(
+async function getCheckboxCommand(
   components: Component[],
   editContext: EditContextType,
   fieldName: string,
   label: string,
-): ComponentCommand | null {
-  const someLinked = components.find(
-    (x) =>
-      x.datasourceItem?.fields.find((x) => x.name === fieldName)?.rawValue ===
-      "1",
+): Promise<ComponentCommand | null> {
+  const items = await editContext.itemsRepository.getItems(
+    components.filter((x) => x.datasourceItem).map((x) => x.datasourceItem!),
   );
-  const allLinked = !components.find(
-    (x) =>
-      x.datasourceItem?.fields.find((x) => x.name === fieldName)?.rawValue !==
-      "1",
+
+  const someLinked = items.find(
+    (y) => y.fields.find((z) => z.name === fieldName)?.rawValue === "1",
+  );
+
+  const allLinked = !items.find(
+    (y) => y.fields.find((z) => z.name === fieldName)?.rawValue !== "1",
   );
 
   return {
@@ -221,10 +221,8 @@ function getCheckboxCommand(
     label,
     disabled: () => false,
     execute: async () => {
-      components.forEach((c) => {
-        const field = c.datasourceItem?.fields.find(
-          (x) => x.name === fieldName,
-        );
+      items.forEach((c) => {
+        const field = c.fields.find((x) => x.name === fieldName);
         if (!field) return;
         editContext.operations.editField({
           field: field.descriptor,
@@ -237,10 +235,10 @@ function getCheckboxCommand(
   };
 }
 
-function getInheritChildrenFromMasterCommand(
+async function getInheritChildrenFromMasterCommand(
   components: Component[],
   editContext: EditContextType,
-): ComponentCommand | null {
+): Promise<ComponentCommand | null> {
   if (!components.length) return null;
   if (editContext.page?.item?.masterLanguages?.length === 0) return null;
   if (components.find((x) => !x.placeholders || x.placeholders.length === 0))

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

@@ -7,7 +7,9 @@ import { Component } from "../pageModel";
 import { PageViewContext } from "../page-viewer/pageViewContext";
 import { ArrowUpFromDot } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { CompareIcon } from "../ui/Icons";
+
+import { ComponentCommand } from "../commands/componentCommands";
+
 export function FrameMenu({
   component,
   compareView,
@@ -21,6 +23,7 @@ export function FrameMenu({
   const resizeObserverRef = useRef<ResizeObserver | null>(null);
   const mutationObserverRef = useRef<MutationObserver | null>(null);
   const headerRef = useRef<HTMLDivElement>(null);
+  const [commands, setCommands] = useState<ComponentCommand[]>([]);
 
   const [componentRect, setComponentRect] = useState<Rect>();
   const [isHeaderWiderThanComponent, setIsHeaderWiderThanComponent] =
@@ -135,7 +138,16 @@ export function FrameMenu({
 
   if (!component || !editContext) return null;
 
-  const commands = editContext.getComponentCommands([component]);
+  // const commands = editContext.getComponentCommands([component]);
+
+  useEffect(() => {
+    async function loadCommands() {
+      const commands = await editContext!.getComponentCommands([component]);
+      setCommands(commands);
+    }
+    loadCommands();
+  }, [component]);
+
   const isDraggable =
     component.canBeMoved &&
     editContext.mode === "edit" &&

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.3847";
-export const buildDate = "2025-04-26 11:32:40";
+export const version = "1.0.3849";
+export const buildDate = "2025-04-27 12:30:47";