@alpaca-editor/core 1.0.3880 → 1.0.3881

package/src/editor/ScrollingContentTree.tsx

@@ -2,20 +2,24 @@ import { useEffect, useState } from "react";
 import { ItemTreeNodeData } from "./services/contentService";
 
 import ContentTree from "./ContentTree";
-import { FullItem } from "./pageModel";
+import { FullItem, ItemDescriptor } from "./pageModel";
 import { contentItemId } from "../config/config";
-import { useEditContext } from "./client/editContext";
+import { useEditContext, EditContextType } from "./client/editContext";
 
 export function ScrollingContentTree({
   selectedItemId,
   onSelectionChange,
   rootItemId,
+
+  expandedItemId,
 }: {
   selectedItemId?: string;
   onSelectionChange?: (itemIds: ItemTreeNodeData[]) => void;
   rootItemId?: string;
+  expandedItemId?: string;
 }) {
   const [selectedItem, setSelectdItem] = useState<FullItem | null>(null);
+  const [expandedItem, setExpandedItem] = useState<FullItem | null>();
   const editContext = useEditContext();
 
   useEffect(() => {
@@ -31,12 +35,28 @@ export function ScrollingContentTree({
     loadItem();
   }, [selectedItemId]);
 
+  useEffect(() => {
+    const loadItem = async () => {
+      if (!expandedItemId && !selectedItemId) {
+        setExpandedItem(null);
+        return;
+      }
+      const item = await editContext!.itemsRepository.getItem({
+        id: expandedItemId ?? selectedItemId ?? "",
+        language: editContext!.currentItemDescriptor?.language ?? "en",
+        version: 0,
+      });
+      if (item) setExpandedItem(item);
+    };
+    loadItem();
+  }, [expandedItemId, selectedItemId]);
+
   return (
     <div className="absolute inset-0 overflow-auto">
       <ContentTree
         language={editContext!.currentItemDescriptor?.language ?? "en"}
         rootItemId={rootItemId ?? contentItemId}
-        expandIdPath={selectedItem?.idPath}
+        expandIdPath={expandedItem?.idPath}
         selectedItemIds={selectedItemId ? [selectedItemId] : []}
         selectionMode="single"
         className="h-full p-1"

package/src/editor/ai/AiTerminal.tsx

@@ -162,12 +162,7 @@ export function AiTerminal({
     // Update the messages state
     setMessages([...currentMessages]);
     setResponseMessages([...currentMessages]);
-    console.log(
-      "response",
-      messagesRef.current,
-      response.messages,
-      currentMessages,
-    );
+
     terminalCallback(
       <AiResponseMessage
         messages={currentMessages}

package/src/editor/ai/AiToolCall.tsx

@@ -39,7 +39,6 @@ export function AiToolCall({
       </div>
       {expanded && (
         <div className="ml-4">
-          <div className="italic">Args:</div>
           <div>{renderJsonOrText(toolCall.function.arguments)}</div>
           {error && (
             <div className="ml-4 text-red-500">

package/src/editor/client/AboutDialog.tsx

@@ -1,5 +1,5 @@
 import { Dialog } from "primereact/dialog";
-import { DialogProps } from "./DialogContext";
+import { DialogProps } from "./editContext";
 import { useImperativeHandle, useState, forwardRef, useEffect } from "react";
 import { buildDate, version } from "../../revision";
 

package/src/editor/client/EditorClient.tsx

@@ -24,6 +24,8 @@ import {
   EditorMode,
 } from "./editContext";
 
+import type { OpenDialog } from "./editContext";
+
 import { EditorConfiguration, MenuItem } from "../../config/types";
 import { useRouter, useSearchParams, usePathname } from "next/navigation";
 import { findComponent, getComponentById } from "../componentTreeHelper";
@@ -103,7 +105,7 @@ import { useItemsRepository } from "./itemsRepository";
 
 import { Spinner } from "../ui/Spinner";
 import { cleanId } from "../utils/id-helper";
-import { useDialog } from "./DialogContext";
+
 import { useDebouncedCallback } from "use-debounce";
 
 import { Tour } from "../../tour/Tour";
@@ -306,8 +308,6 @@ export function EditorClient({
     }
   }, [selection]);
 
-  const dialogContext = useDialog();
-
   const itemsRepository = useItemsRepository(
     setModifiedFields,
     setLastEditedFields,
@@ -1024,7 +1024,7 @@ export function EditorClient({
         pathname,
         router,
         searchParams,
-        openDialog: dialogContext.openDialog,
+        openDialog: openDialog,
         event,
         data,
       };
@@ -1032,7 +1032,7 @@ export function EditorClient({
 
       return result;
     },
-    [editContextRef, pathname, router, searchParams, dialogContext],
+    [editContextRef, pathname, router, searchParams],
   );
 
   const handleKeyDownDebounced = useDebouncedCallback(
@@ -1389,7 +1389,18 @@ export function EditorClient({
     switchView();
   };
 
-  const openDialog = dialogContext.openDialog;
+  const [dialog, setDialog] = useState<ReactNode>(null);
+
+  const openDialog: OpenDialog = (Component, props) => {
+    return new Promise((resolve) => {
+      const handleClose = (result: any) => {
+        setDialog(null);
+        resolve(result);
+      };
+
+      setDialog(<Component {...(props as any)} onClose={handleClose} />);
+    });
+  };
 
   const operationsContext = getOperationsContext(state, ui);
 
@@ -1607,7 +1618,7 @@ export function EditorClient({
           await (actionButton as ClientFieldButton).clientAction!({
             field,
             editContext,
-            dialogContext,
+            //dialogContext,
           });
         }
 
@@ -1673,7 +1684,7 @@ export function EditorClient({
           router,
           searchParams,
           data,
-          openDialog: dialogContext.openDialog,
+          openDialog,
         };
 
         return command.disabled(props);
@@ -1965,6 +1976,7 @@ export function EditorClient({
                 <Spinner />
               </div>
             )}
+            {dialog}
           </EditContextProvider>
         </ModifiedFieldsContextProvider>
       </OperationsContextProvider>

package/src/editor/client/editContext.ts

@@ -46,7 +46,6 @@ import { ItemsRepository } from "./itemsRepository";
 import { MediaSelectorMode } from "../media-selector/MediaSelector";
 import { ComponentCommand } from "../commands/componentCommands";
 import { AiTerminalOptions } from "../ai/AiTerminal";
-import { OpenDialog } from "./DialogContext";
 import { Wizard } from "../../page-wizard/PageWizard";
 export type DragObject = {
   type: "template" | "component" | "link-component" | "items";
@@ -65,6 +64,14 @@ export type SelectionRange = {
   text: string;
 };
 
+export type DialogProps<T> = {
+  onClose: (result: T | null) => void;
+};
+export type OpenDialog = <T, P>(
+  Component: React.ComponentType<P & DialogProps<T>>,
+  props: P,
+) => Promise<T | null>;
+
 export type EditorMode = "edit" | "preview" | "suggestions";
 
 export type EditContextType = {
@@ -78,7 +85,7 @@ export type EditContextType = {
       items: ItemDescriptor[],
       target: ItemDescriptor,
       index: number,
-    ) => Promise<void>;
+    ) => Promise<ItemDescriptor[]>;
     duplicateItem: (
       item: ItemDescriptor,
       target: ItemDescriptor,

package/src/editor/client/operations.ts

@@ -612,7 +612,8 @@ export function getOperationsContext(
 
   const copyItems = useCallback(
     async (items: ItemDescriptor[], target: ItemDescriptor, index: number) => {
-      await executeCopyItems(items, target, index);
+      const result = await executeCopyItems(items, target, index);
+      return result.data as ItemDescriptor[];
     },
     [state.itemsRepository],
   );

package/src/editor/commands/commands.ts

@@ -1,4 +1,4 @@
-import { OpenDialog } from "../client/DialogContext";
+import { OpenDialog } from "../client/editContext";
 import { EditContextType } from "../client/editContext";
 
 export type CommandContext<T> = {
@@ -6,7 +6,7 @@ export type CommandContext<T> = {
   openDialog: OpenDialog;
   event?: React.SyntheticEvent;
   searchParams?: URLSearchParams;
-  pathname?: string;  
+  pathname?: string;
   data?: T;
 };
 
@@ -17,7 +17,6 @@ export type Command<T extends CommandData> = {
   execute(context: CommandContext<T>): Promise<any>;
   disabled: (context: CommandContext<T>) => boolean;
   keyBinding?: string;
-
 };
 
 export type CommandData = {};

package/src/editor/commands/itemCommands.tsx

@@ -3,6 +3,11 @@ import { FullItem, ItemDescriptor } from "../pageModel";
 
 import { ItemNameDialog, ItemNameDialogProps } from "../ui/ItemNameDialogNew";
 
+import {
+  CopyMoveTargetSelectorDialog,
+  CopyMoveTargetSelectorDialogProps,
+} from "../ui/CopyMoveTargetSelectorDialog";
+
 export type ItemCommandData = CommandData & {
   items: FullItem[];
 };
@@ -163,12 +168,33 @@ export const moveItemsCommand: MoveCopyItemsCommand = {
     !context.data?.items || context.data.items.length !== 1 || false,
   execute: async (context: MoveCopyItemsCommandContext) => {
     const items = context.data?.items;
-    const targetItem = context.data?.targetItem;
-    const index = context.data?.index;
+    let targetItem = context.data?.targetItem;
+    let index = context.data?.index;
+
+    if (!items) return;
+
+    if (!targetItem) {
+      const result = await context.openDialog<
+        ItemDescriptor,
+        CopyMoveTargetSelectorDialogProps
+      >(CopyMoveTargetSelectorDialog, {
+        items: items ?? [],
+        editContext: context.editContext,
+        header: "Select Target Item",
+        label:
+          items?.length && items.length > 1
+            ? `Move ${items?.length} items`
+            : `Move item`,
+      });
+      if (result) {
+        targetItem = result;
+        index = -1;
+      }
+    }
 
-    if (!items || !targetItem || !index) return;
+    if (!targetItem) return;
 
-    context.editContext.operations.moveItems(items, targetItem, index);
+    context.editContext.operations.moveItems(items, targetItem, index ?? 0);
   },
 };
 
@@ -177,15 +203,44 @@ export const copyItemsCommand: MoveCopyItemsCommand = {
   label: "Copy Items",
   icon: "pi pi-copy",
   disabled: (context: MoveCopyItemsCommandContext) =>
-    !context.data?.items || context.data.items.length !== 1 || false,
+    !context.data?.items || false,
   execute: async (context: MoveCopyItemsCommandContext) => {
+    console.log("copyItemsCommand", context.data);
     const items = context.data?.items;
-    const targetItem = context.data?.targetItem;
-    const index = context.data?.index;
+    let targetItem = context.data?.targetItem;
+    let index = context.data?.index;
+
+    console.log("targetItem", targetItem);
+
+    if (!targetItem) {
+      const result = await context.openDialog<
+        ItemDescriptor,
+        CopyMoveTargetSelectorDialogProps
+      >(CopyMoveTargetSelectorDialog, {
+        items: items ?? [],
+        editContext: context.editContext,
+        header: "Select Target Item",
+        label:
+          items?.length && items.length > 1
+            ? `Copy ${items?.length} items`
+            : `Copy item`,
+      });
+      if (result) {
+        targetItem = result;
+        index = -1;
+      }
+    }
 
-    if (!items || !targetItem || !index) return;
+    if (!items || !targetItem) return;
 
-    context.editContext.operations.copyItems(items, targetItem, index);
+    const result = await context.editContext.operations.copyItems(
+      items,
+      targetItem,
+      index ?? 0,
+    );
+    if (result && result.length > 0 && result[0]) {
+      context.editContext.loadItem(result[0]);
+    }
   },
 };
 

package/src/editor/commands/localizeItem/LocalizeItemDialog.tsx

@@ -2,7 +2,7 @@ import { Button } from "primereact/button";
 import { Dialog } from "primereact/dialog";
 import { useEffect, useState } from "react";
 import DialogButtons from "../../ui/DialogButtons";
-import { DialogProps } from "../../client/DialogContext";
+import { DialogProps } from "../../client/editContext";
 import { getLanguagesAndVersions } from "../../services/contentService";
 import { FullItem, ItemDescriptor } from "../../pageModel";
 import { LanguageVersions } from "../../../types";
@@ -22,7 +22,7 @@ type LanguageData = {
 };
 
 export function LocalizeItemDialog(
-  props: LocalizeItemDialogProps & DialogProps<string>
+  props: LocalizeItemDialogProps & DialogProps<string>,
 ) {
   const [languageSelection, setLanguageSelection] = useState<
     Record<string, boolean>
@@ -42,7 +42,7 @@ export function LocalizeItemDialog(
         itemDescriptors.map(async (item: ItemDescriptor) => {
           const result = await getLanguagesAndVersions(item);
           return result.data?.languages || [];
-        })
+        }),
       );
       const languageMap = new Map<string, LanguageData>();
       itemLanguages.forEach((languages, index) => {
@@ -51,7 +51,7 @@ export function LocalizeItemDialog(
             name: language.name,
             items: [],
           };
-          if (language.versions > 0)
+          if (language.versions > 0 && itemDescriptors[index])
             languageData.items.push(itemDescriptors[index]);
           languageMap.set(language.languageCode, languageData);
         });
@@ -98,13 +98,13 @@ export function LocalizeItemDialog(
   function getContent() {
     if (finished)
       return (
-        <div className="flex gap-1 flex-col justify h-full">
+        <div className="justify flex h-full flex-col gap-1">
           {completedTasks.length > 0 && (
             <>
-              <div className="text-lg font-bold pt-3 px-3">
+              <div className="px-3 pt-3 text-lg font-bold">
                 Finished. Versions created:
               </div>
-              <div className="flex-1 relative">
+              <div className="relative flex-1">
                 <div className="absolute inset-3 flex flex-col gap-3 overflow-y-auto">
                   {completedTasks.map((x, index) => (
                     <div key={index}>{x}</div>
@@ -114,7 +114,7 @@ export function LocalizeItemDialog(
             </>
           )}
           {completedTasks.length === 0 && (
-            <div className="flex items-center justify-center h-full">
+            <div className="flex h-full items-center justify-center">
               All items are already localized.
             </div>
           )}
@@ -126,22 +126,22 @@ export function LocalizeItemDialog(
 
     if (isExecuting)
       return (
-        <div className="flex items-center justify-center gap-3 h-full">
+        <div className="flex h-full items-center justify-center gap-3">
           <Spinner /> Creating version {currentTask}
         </div>
       );
 
     return (
-      <div className="flex gap-1 flex-col justify h-full text-sm ">
-        <div className="p-3 flex flex-col gap-2 h-full">
+      <div className="justify flex h-full flex-col gap-1 text-sm">
+        <div className="flex h-full flex-col gap-2 p-3">
           <div className="my-2">
             Select languages to localize{" "}
             {props.items.map((x) => x.name).join(", ")}:
           </div>
-          <div className="flex items-center gap-2 my-1">
+          <div className="my-1 flex items-center gap-2">
             <Checkbox
               checked={allLanguages.every(
-                (language) => languageSelection[language.code]
+                (language) => languageSelection[language.code],
               )}
               onChange={(e) => {
                 setLanguageSelection(
@@ -149,19 +149,19 @@ export function LocalizeItemDialog(
                     Array.from(languageData?.keys() || []).map((language) => [
                       language,
                       e.checked || false,
-                    ])
-                  )
+                    ]),
+                  ),
                 );
               }}
             />{" "}
             All
           </div>
           <div className="relative flex-1">
-            <div className="absolute top-0 left-0 w-full h-full overflow-y-auto">
+            <div className="absolute top-0 left-0 h-full w-full overflow-y-auto">
               {allLanguages.map((language) => (
                 <div
                   key={language.code}
-                  className="flex items-center gap-2 my-2"
+                  className="my-2 flex items-center gap-2"
                 >
                   <Checkbox
                     checked={languageSelection[language.code] || false}

package/src/editor/component-designer/ComponentDesignerMenu.tsx

@@ -5,7 +5,7 @@ import {
   createRendering,
   loadComponentDetails,
 } from "../services/componentDesignerService";
-import { ItemNameDialogHandle, ItemNameDialog } from "../ui/ItemNameDialog";
+import { ItemNameDialog } from "../ui/ItemNameDialogNew";
 import { useRef } from "react";
 import { useEditContext } from "../client/editContext";
 import { ItemLanguageVersion } from "../menubar/ItemLanguageVersion";
@@ -14,78 +14,78 @@ export function ComponentDesignerMenu() {
   const context = useEditContext();
   if (!context) return;
 
-  const menuItems = [
-    {
-      id: "newComponent",
-      label: "New Component",
-      icon: "pi pi-fw pi-plus",
-      command: () => createNew(),
-      //      disabled: !context.componentRenderingFolder,
-    },
-    {
-      id: "newRendering",
-      label: "New Rendering",
-      icon: "pi pi-fw pi-palette",
-      command: () => createNewRendering(),
-      disabled: !context.componentDesignerComponent,
-    },
-    {
-      id: "delete",
-      label: "Delete rendering",
-      icon: "pi pi-fw pi-trash",
-      disabled: !context.componentDesignerRendering,
-    },
-  ];
-  const itemNameDialogRef = useRef<ItemNameDialogHandle>(null);
+  // const menuItems = [
+  //   {
+  //     id: "newComponent",
+  //     label: "New Component",
+  //     icon: "pi pi-fw pi-plus",
+  //     command: () => createNew(),
+  //     //      disabled: !context.componentRenderingFolder,
+  //   },
+  //   {
+  //     id: "newRendering",
+  //     label: "New Rendering",
+  //     icon: "pi pi-fw pi-palette",
+  //     command: () => createNewRendering(),
+  //     disabled: !context.componentDesignerComponent,
+  //   },
+  //   {
+  //     id: "delete",
+  //     label: "Delete rendering",
+  //     icon: "pi pi-fw pi-trash",
+  //     disabled: !context.componentDesignerRendering,
+  //   },
+  // ];
+  // const itemNameDialogRef = useRef<ItemNameDialogHandle>(null);
 
-  const createNew = async () => {
-    itemNameDialogRef.current?.show({
-      title: "Choose Component Name",
-      accept: async (name) => {
-        await createNewComponent(name, context.page!.item);
-      },
-    });
-  };
+  // const createNew = async () => {
+  //   itemNameDialogRef.current?.show({
+  //     title: "Choose Component Name",
+  //     accept: async (name) => {
+  //       await createNewComponent(name, context.page!.item);
+  //     },
+  //   });
+  // };
 
-  const createNewRendering = async () => {
-    itemNameDialogRef.current?.show({
-      title: "Choose Rendering Name",
-      accept: async (name) => {
-        if (!context.componentDesignerComponent) return;
-        const details = await createRendering(
-          name,
-          context.page!.item,
-          context.componentDesignerComponent.templateId
-        );
-        if (!("id" in details)) return;
+  // const createNewRendering = async () => {
+  //   itemNameDialogRef.current?.show({
+  //     title: "Choose Rendering Name",
+  //     accept: async (name) => {
+  //       if (!context.componentDesignerComponent) return;
+  //       const details = await createRendering(
+  //         name,
+  //         context.page!.item,
+  //         context.componentDesignerComponent.templateId
+  //       );
+  //       if (!("id" in details)) return;
 
-        const component = await loadComponentDetails(
-          context.componentDesignerComponent.templateId,
-          context!.page!.item.id
-        );
-        // const rendering = await getItem({
-        //   id: details.id,
-        //   language: "en",
-        //   version: 0,
-        // });
-        context.setComponentDesignerComponent(component);
-        //    context.setComponentDesignerRendering(rendering);
-      },
-    });
-  };
+  //       const component = await loadComponentDetails(
+  //         context.componentDesignerComponent.templateId,
+  //         context!.page!.item.id
+  //       );
+  //       // const rendering = await getItem({
+  //       //   id: details.id,
+  //       //   language: "en",
+  //       //   version: 0,
+  //       // });
+  //       context.setComponentDesignerComponent(component);
+  //       //    context.setComponentDesignerRendering(rendering);
+  //     },
+  //   });
+  // };
 
   return (
     <>
-      <Menubar
+      {/* <Menubar
         model={menuItems}
         end={
           <div className="flex items-center space-x-2">
             <ItemLanguageVersion />
           </div>
         }
-        className="p-1 text-sm rounded-none border-0 border-b bg-gray-50"
+        className="rounded-none border-0 border-b bg-gray-50 p-1 text-sm"
       ></Menubar>
-      <ItemNameDialog ref={itemNameDialogRef} />
+      <ItemNameDialog ref={itemNameDialogRef} /> */}
     </>
   );
 }