@alpaca-editor/core 1.0.3813 → 1.0.3815

package/src/editor/ai/AiTerminal.tsx

@@ -99,7 +99,7 @@ export function AiTerminal({
       setProfiles(profiles);
       if (!activeProfile)
         setActiveProfile(
-          profiles.find((x) => x.name == defaultProfile) || profiles[0]
+          profiles.find((x) => x.name == defaultProfile) || profiles[0],
         );
     }
     fetchProfiles();
@@ -116,7 +116,7 @@ export function AiTerminal({
 
   async function commandHandler(
     text: string,
-    callback: (text: React.ReactNode, finished: boolean) => void
+    callback: (text: React.ReactNode, finished: boolean) => void,
   ) {
     const newMessages = [
       ...messagesRef.current,
@@ -180,18 +180,25 @@ export function AiTerminal({
             if (isEditTextFieldOp(op)) {
               const editFieldOp = op as EditFieldOperation;
 
-              if (editFieldOp.item) {
+              if (editFieldOp.itemId) {
+                const fieldDescriptor = {
+                  item: {
+                    ...editFieldOp.mainItem,
+                    id: editFieldOp.itemId,
+                  },
+                  fieldId: editFieldOp.fieldId,
+                };
                 editContext.itemsRepository.updateFieldValue(
-                  editFieldOp,
+                  fieldDescriptor,
                   editFieldOp.user ?? { name: "unknown", ai: false },
                   false,
-                  editFieldOp.value
+                  editFieldOp.value,
                 );
 
-                editContext.select([editFieldOp.item.id]);
-                editContext.setScrollIntoView(editFieldOp.item.id);
+                editContext.select([editFieldOp.itemId]);
+                editContext.setScrollIntoView(editFieldOp.itemId);
 
-                editContext?.setFocusedField(editFieldOp, false);
+                editContext?.setFocusedField(fieldDescriptor, false);
               }
             } else {
               const addOp = op as AddComponentOperation;
@@ -203,7 +210,7 @@ export function AiTerminal({
             }
           });
         }
-      }
+      },
     );
 
     if (response) {
@@ -233,11 +240,11 @@ export function AiTerminal({
 
   return (
     <div
-      className="h-full flex flex-col relative flex-1 pl-1.5"
+      className="relative flex h-full flex-1 flex-col pl-1.5"
       data-testid="ai-terminal"
     >
-      <div className="flex-1 relative">
-        <div className="inset-0 absolute tour-ai-terminal">
+      <div className="relative flex-1">
+        <div className="tour-ai-terminal absolute inset-0">
           <Terminal
             disabled={!model}
             ref={terminalRef}
@@ -248,7 +255,7 @@ export function AiTerminal({
             infobar={
               response?.numInputTokens && (
                 <div
-                  className="text-gray-400 text-right"
+                  className="text-right text-gray-400"
                   style={{ fontSize: "10px" }}
                 >
                   Tokens in: {response?.numInputTokens?.toLocaleString()} out:{" "}
@@ -262,18 +269,18 @@ export function AiTerminal({
             }
             prompt={prompt}
             setPrompt={setPrompt}
-            statusbar=<div className="flex items-center justify-between gap-1 flex-1">
+            statusbar=<div className="flex flex-1 items-center justify-between gap-1">
               <a
-                className="text-xs text-blue-300 cursor-pointer flex items-center gap-1 ml-1"
+                className="ml-1 flex cursor-pointer items-center gap-1 text-xs text-blue-300"
                 onClick={() => {
                   setShowPredefined(!showPredefined);
                 }}
               >
-                <WizardIcon className="w-5 h-5" />
+                <WizardIcon className="h-5 w-5" />
                 Predefined prompts
               </a>
               {editContext.selection?.length > 0 && (
-                <div className="text-xs text-red-400 flex items-center mr-2">
+                <div className="mr-2 flex items-center text-xs text-red-400">
                   {editContext.selection.length} items selected
                   <SimpleIconButton
                     icon="pi pi-times"
@@ -285,12 +292,12 @@ export function AiTerminal({
                 </div>
               )}
               {showPredefined && (
-                <div className="absolute right-0 left-0 bottom-8 text-sm overflow-y-auto bg-white p-3 pb-1 flex flex-col gap-1 ">
+                <div className="absolute right-0 bottom-8 left-0 flex flex-col gap-1 overflow-y-auto bg-white p-3 pb-1 text-sm">
                   {activeProfile &&
                     activeProfile.prompts.map((p, index) => (
                       <div
                         key={index}
-                        className="p-1.5 mb-1 border border-gray-200 rounded-lg cursor-pointer text-gray-700 text-xs"
+                        className="mb-1 cursor-pointer rounded-lg border border-gray-200 p-1.5 text-xs text-gray-700"
                         onClick={() => {
                           setPrompt(p.prompt);
                           setShowPredefined(false);
@@ -326,12 +333,12 @@ export function AiTerminal({
           />
         </div>
         {activeProfile?.errorMessage && (
-          <div className="text-red-500 text-sm p-2 inset-0 absolute grid items-center justify-center">
+          <div className="absolute inset-0 grid items-center justify-center p-2 text-sm text-red-500">
             {activeProfile?.errorMessage}
           </div>
         )}
         {!model && (
-          <div className="inset-0 absolute grid items-center justify-center text-gray-400 text-sm">
+          <div className="absolute inset-0 grid items-center justify-center text-sm text-gray-400">
             {!activeProfile ? "No profile selected" : "No model selected"}
           </div>
         )}
@@ -348,7 +355,7 @@ async function executePrompt(
   model: string | null,
   selectedText: string | null,
   context: AiContext,
-  callback: (response: any) => void
+  callback: (response: any) => void,
 ): Promise<Response | null> {
   const response = await fetch(context.endpoint, {
     method: "POST",
@@ -421,7 +428,7 @@ async function executePrompt(
 function handleResponse(
   response: any,
   terminalCallback: (text: React.ReactNode, finished: boolean) => void,
-  isFinished: boolean
+  isFinished: boolean,
 ) {
   const toolcalls: [] =
     response?.toolCalls?.map((tool_call: any) => {
@@ -445,6 +452,6 @@ function handleResponse(
       editOperations={response.editOperations}
       finished={isFinished}
     />,
-    isFinished
+    isFinished,
   );
 }

package/src/editor/client/EditorClient.tsx

@@ -23,7 +23,7 @@ import {
   SelectionRange,
 } from "./editContext";
 
-import { EditorConfiguration } from "../../config/types";
+import { EditorConfiguration, MenuItem } from "../../config/types";
 import { useRouter, useSearchParams, usePathname } from "next/navigation";
 import { getComponentById } from "../componentTreeHelper";
 
@@ -60,7 +60,7 @@ import MainLayout from "../MainLayout";
 import { useEventListenerExt } from "../utils";
 
 import { EditContextMenu, EditContextMenuRef } from "../ContextMenu";
-import { MenuItem } from "primereact/menuitem";
+
 import { FieldEditorPopup, FieldEditorPopupRef } from "../FieldEditorPopup";
 
 import { Command, CommandData } from "../commands/commands";
@@ -437,7 +437,13 @@ export function EditorClient({
         if (op.type === "edit-field") {
           const editFieldOperation = op as EditFieldOperation;
 
-          const field = await itemsRepository.getField(editFieldOperation);
+          const field = await itemsRepository.getField({
+            item: {
+              ...editFieldOperation.mainItem,
+              id: editFieldOperation.itemId,
+            },
+            fieldId: editFieldOperation.fieldId,
+          });
 
           if (
             !field ||
@@ -445,7 +451,12 @@ export function EditorClient({
               field.type !== "multi-line text" &&
               field.type !== "rich text")
           ) {
-            itemsRepository.refreshItems([editFieldOperation.item]);
+            itemsRepository.refreshItems([
+              {
+                ...editFieldOperation.mainItem,
+                id: editFieldOperation.itemId,
+              },
+            ]);
             requestRefresh("immediate");
           }
           //TODO: field value changes that require rerender
@@ -453,7 +464,10 @@ export function EditorClient({
             itemsRepository.updateFieldValue(
               {
                 fieldId: editFieldOperation.fieldId,
-                item: editFieldOperation.item,
+                item: {
+                  ...editFieldOperation.mainItem,
+                  id: editFieldOperation.itemId,
+                },
               },
               editFieldOperation.user ?? { name: "unknown", ai: false },
               false,
@@ -834,7 +848,10 @@ export function EditorClient({
         return undefined;
       }
 
-      if (!item.hasLayout && viewName === "page-editor") {
+      if (
+        (!item.hasLayout && viewName === "page-editor") ||
+        viewName == "splash-screen"
+      ) {
         setViewName("content-editor");
       }
 

package/src/editor/client/editContext.ts

@@ -291,7 +291,7 @@ export function useEditContextRef() {
 export type EditButton = {
   id: string;
   icon: React.ReactNode;
-  onClick: (ev: MouseEvent<HTMLButtonElement>) => void;
+  onClick: (ev: MouseEvent) => void;
   label: string;
 };
 

package/src/editor/client/operations.ts

@@ -368,20 +368,15 @@ export function getOperationsContext(
       !op ||
       op.undone ||
       op.type !== "edit-field" ||
-      !op.item ||
-      op.item.id !== item.id ||
+      !op.itemId ||
+      op.itemId !== item.id ||
       op.fieldId !== field.fieldId ||
-      op.item.language !== item.language ||
-      op.item.version !== item.version
+      op.mainItem.language !== item.language ||
+      op.mainItem.version !== item.version
     ) {
       op = {
         type: "edit-field",
-        item: {
-          id: item.id,
-          version: item.version,
-          language: item.language,
-          name: item.name,
-        },
+        itemId: item.id,
         fieldId: field.fieldId,
         fieldName: fieldItem.name,
         date: new Date().toISOString(),
@@ -398,10 +393,10 @@ export function getOperationsContext(
 
     const firstEditInheritedComponent =
       item.isInheritedFromMasterLanguage &&
-      op.item.language != state.page?.item.language;
+      op.mainItem.language != state.page?.item.language;
 
     if (firstEditInheritedComponent)
-      op.item.language = state.page!.item.language;
+      op.mainItem.language = state.page!.item.language;
 
     lastOp.current = op;
     return op;
@@ -440,7 +435,10 @@ export function getOperationsContext(
           const itemsToRefresh = result.data
             .map((x: EditOperation) => {
               if (x.type === "edit-field")
-                return (x as EditFieldOperation).item;
+                return {
+                  ...(x as EditFieldOperation).mainItem,
+                  id: (x as EditFieldOperation).itemId,
+                };
               if (x.type === "add-component")
                 return {
                   id: (x as AddComponentOperation).componentId,
@@ -492,7 +490,11 @@ export function getOperationsContext(
       if (result.type === "success") {
         const itemsToRefresh = result.data
           .map((x: EditOperation) => {
-            if (x.type === "edit-field") return (x as EditFieldOperation).item;
+            if (x.type === "edit-field")
+              return {
+                ...(x as EditFieldOperation).mainItem,
+                id: (x as EditFieldOperation).itemId,
+              };
             if (x.type === "add-component")
               return {
                 id: (x as AddComponentOperation).componentId,

package/src/editor/client/pageModelBuilder.ts

@@ -11,15 +11,20 @@ import {
 } from "../pageModel";
 
 import { ItemsRepository } from "./itemsRepository";
-import { loadPlaceholderInsertOptions, PlaceholderInsertOptions } from "../services/editService";
+import {
+  loadPlaceholderInsertOptions,
+  PlaceholderInsertOptions,
+} from "../services/editService";
 
 export function usePageModel(
   itemsRepository: ItemsRepository | undefined,
-  pageItemDescriptor?: ItemDescriptor
+  pageItemDescriptor?: ItemDescriptor,
 ) {
   const [page, setPage] = useState<Page>();
   const [pageSkeleton, setPageSkeleton] = useState<PageSkeleton>();
-  const [insertOptions, setInsertOptions] = useState<PlaceholderInsertOptions[]>([]);
+  const [insertOptions, setInsertOptions] = useState<
+    PlaceholderInsertOptions[]
+  >([]);
 
   useEffect(() => {
     setPage(undefined);
@@ -29,13 +34,13 @@ export function usePageModel(
   useEffect(() => {
     const loadInsertOptions = async () => {
       if (!pageSkeleton) return;
-      
+
       const collectPlaceholderKeys = (skeleton: PageSkeleton): string[] => {
         const keys: string[] = [];
         const collectFromComponent = (component: ComponentSkeleton) => {
-          component.placeholders.forEach(placeholder => {
+          component.placeholders.forEach((placeholder) => {
             keys.push(placeholder.key);
-            placeholder.components.forEach(c => collectFromComponent(c));
+            placeholder.components.forEach((c) => collectFromComponent(c));
           });
         };
         collectFromComponent(skeleton.rootComponent);
@@ -43,7 +48,10 @@ export function usePageModel(
       };
 
       const placeholderKeys = collectPlaceholderKeys(pageSkeleton);
-      const options = await loadPlaceholderInsertOptions(pageSkeleton.item, placeholderKeys);
+      const options = await loadPlaceholderInsertOptions(
+        pageSkeleton.item,
+        placeholderKeys,
+      );
       setInsertOptions(options);
     };
     loadInsertOptions();
@@ -76,7 +84,6 @@ export function usePageModel(
 
     collectItems(pageSkeleton.rootComponent);
 
-    
     const fullItems = await itemsRepository.getItems(itemsToFetch);
 
     const getItem = (descriptor: ItemDescriptor) =>
@@ -84,7 +91,7 @@ export function usePageModel(
         (x) =>
           x.id === descriptor.id &&
           x.language === descriptor.language &&
-          x.version === descriptor.version
+          x.version === descriptor.version,
       );
 
     const pageItem = await itemsRepository.getItem(pageSkeleton.item);
@@ -96,9 +103,8 @@ export function usePageModel(
 
     const buildModel = (
       skeleton: ComponentSkeleton,
-      parentPlaceholder?: Placeholder
+      parentPlaceholder?: Placeholder,
     ): Component | undefined => {
-
       const datasourceItemTemp = skeleton.datasourceItem
         ? getItem(skeleton.datasourceItem)
         : undefined;
@@ -127,11 +133,14 @@ export function usePageModel(
         datasourceItem,
         items,
         placeholders,
-        isShared: skeleton.id !== skeleton.datasourceItem?.id,
-        parentPlaceholder        
+        isShared: !(datasourceItem?.path.startsWith(pageItem.path) || true),
+        parentPlaceholder,
+        typeId: skeleton.typeId || datasourceItem?.templateId || "",
+        canBeMoved:
+          !datasourceItem ||
+          datasourceItem?.id !== parentPlaceholder?.parentComponent?.id,
       };
 
-
       component.placeholders = skeleton.placeholders.map((x) => {
         const insOpts =
           insertOptions.find((y) => y.key === x.key)?.insertOptions ?? [];
@@ -154,7 +163,7 @@ export function usePageModel(
     };
 
     const rootComponent = buildModel(pageSkeleton.rootComponent);
-    
+
     if (!rootComponent) {
       setPage(undefined);
       return;
@@ -165,13 +174,12 @@ export function usePageModel(
       //    revision: itemsRepository.revision,
       editRevision: pageSkeleton.editRevision,
     };
- 
+
     //console.log("Page model updated", performance.now() - start);
     setPage(page);
   };
 
- 
-  useEffect(() => {  
+  useEffect(() => {
     updatePageModel();
   }, [pageSkeleton, itemsRepository, insertOptions]);