@alpaca-editor/core 1.0.4026 → 1.0.4030

package/src/editor/client/operations.ts

@@ -64,6 +64,7 @@ export function getOperationsContext(
     setSuggestedEdits: (suggestedEdits: SuggestedEdit[]) => void;
     mode: EditorMode;
     setFocusFieldComponentId: (componentId: string) => void;
+    setInsertMode: (insertMode: boolean) => void;
   },
   ui: {
     showErrorToast: (error: { summary?: string; details?: string }) => void;
@@ -87,25 +88,31 @@ export function getOperationsContext(
     stateRef.current = state;
   }, [state]);
 
-  const executeOp = async (
-    op: EditOperation,
-    options: ExecuteEditOptions = {
-      refresh: "immediate",
+  // Extract values to avoid state object reference issues
+  const itemsRepository = state.itemsRepository;
+
+  const executeOp = useCallback(
+    async (
+      op: EditOperation,
+      options: ExecuteEditOptions = {
+        refresh: "immediate",
+      },
+    ): Promise<EditOperation> => {
+      console.log("Executing op", op);
+      setExecutingEditOperations((ops) => (ops ? [...ops, op] : [op]));
+      const result = await executeEditOperation(op, state.sessionId);
+      // console.log("Result", result);
+      handleResult(result, options);
+      await state.refreshHistory(op.mainItem);
+      //state.addToEditHistory(result.data as EditOperation);
+      setEditOperationExecuted(result.data as EditOperation);
+      setExecutingEditOperations((ops) =>
+        ops ? ops.filter((x: EditOperation) => x.id !== op.id) : [],
+      );
+      return result.data as EditOperation;
     },
-  ): Promise<EditOperation> => {
-    console.log("Executing op", op);
-    setExecutingEditOperations((ops) => (ops ? [...ops, op] : [op]));
-    const result = await executeEditOperation(op, state.sessionId);
-    // console.log("Result", result);
-    handleResult(result, options);
-    await state.refreshHistory(op.mainItem);
-    //state.addToEditHistory(result.data as EditOperation);
-    setEditOperationExecuted(result.data as EditOperation);
-    setExecutingEditOperations((ops) =>
-      ops ? ops.filter((x: EditOperation) => x.id !== op.id) : [],
-    );
-    return result.data as EditOperation;
-  };
+    [state.sessionId, state.refreshHistory],
+  );
 
   const duplicateComponents = useCallback(
     ({ componentIds }: { componentIds: string[] }) => {
@@ -123,37 +130,40 @@ export function getOperationsContext(
     [state.page],
   );
 
-  const addComponent = async (
-    componentTypeId: string,
-    placeholderKey: string,
-    index: number,
-    pageItem: ItemDescriptor,
-  ) => {
-    // if (!page) {
-    //   console.log("Add component: No page found");
-    //   return;
-    // }
-
-    const op: AddComponentOperation = {
-      type: "add-component",
-      mainItem: pageItem,
-      // parent: parentId
-      //   ? {
-      //       id: parentId,
-      //       language: page.item.language,
-      //       version: page.item.version,
-      //     }
-      //   : undefined,
-      placeholderKey,
-      placeholderIndex: index,
-      componentTypeId,
-      date: new Date().toISOString(),
-      id: uuid(),
-      description: "Add component",
-    };
-    const result = await executeOp(op);
-    return result as AddComponentOperation;
-  };
+  const addComponent = useCallback(
+    async (
+      componentTypeId: string,
+      placeholderKey: string,
+      index: number,
+      pageItem: ItemDescriptor,
+    ) => {
+      // if (!page) {
+      //   console.log("Add component: No page found");
+      //   return;
+      // }
+
+      const op: AddComponentOperation = {
+        type: "add-component",
+        mainItem: pageItem,
+        // parent: parentId
+        //   ? {
+        //       id: parentId,
+        //       language: page.item.language,
+        //       version: page.item.version,
+        //     }
+        //   : undefined,
+        placeholderKey,
+        placeholderIndex: index,
+        componentTypeId,
+        date: new Date().toISOString(),
+        id: uuid(),
+        description: "Add component",
+      };
+      const result = await executeOp(op);
+      return result as AddComponentOperation;
+    },
+    [executeOp],
+  );
 
   const handleResult = (
     result: ExecutionResult<unknown>,
@@ -177,6 +187,11 @@ export function getOperationsContext(
         if (executedOp.focus) {
           state.setSelection([executedOp.focus]);
           state.setFocusFieldComponentId(executedOp.focus);
+          
+          // Clear insert mode immediately after selecting the newly added component
+          if (executedOp.type === "add-component") {
+            state.setInsertMode(false);
+          }
         }
       }
 
@@ -272,9 +287,9 @@ export function getOperationsContext(
         description: "Rename item",
       } as RenameItemOperation);
       state.requestRefresh("immediate");
-      state.itemsRepository.refreshItems([item]);
+      itemsRepository.refreshItems([item]);
     },
-    [state.itemsRepository, executeOp],
+    [itemsRepository, executeOp],
   );
 
   const lastEditField = useRef<FieldDescriptor | undefined>(undefined);
@@ -314,7 +329,7 @@ export function getOperationsContext(
         const op = await getOrMergeSuggestedEditOp(field, rawValue, value, {
           page: state.page,
           user: state.user,
-          itemsRepository: state.itemsRepository,
+          itemsRepository: itemsRepository,
           suggestedEdits: state.suggestedEdits,
           setSuggestedEdits: state.setSuggestedEdits,
         });
@@ -344,7 +359,7 @@ export function getOperationsContext(
         return;
       }
 
-      const saveSequence = await state.itemsRepository.updateFieldValue(
+      const saveSequence = await itemsRepository.updateFieldValue(
         field,
         state.user ?? { name: "unknown", ai: false },
         true,
@@ -373,7 +388,7 @@ export function getOperationsContext(
       return executeEditFieldDebounced({ field, value, rawValue, refresh });
     },
     [
-      state.itemsRepository,
+      itemsRepository,
       getOrMergeSuggestedEditOp,
       state.suggestedEdits,
       state.page,
@@ -396,7 +411,7 @@ export function getOperationsContext(
       refresh?: "none" | "immediate" | "delayed" | "waitForQuietPeriod";
       saveSequence?: number;
     }): Promise<void> => {
-      // state.itemsRepository.updateFieldValue(
+      // itemsRepository.updateFieldValue(
       //   field,
       //   state.user ?? { name: "unknown", ai: false },
       //   true,
@@ -411,11 +426,11 @@ export function getOperationsContext(
 
       if (op) {
         await executeOp(op, { refresh });
-        await state.itemsRepository.refreshItems([field.item]);
-        state.itemsRepository.onFieldSaved(field, val, saveSequence || 0);
+        await itemsRepository.refreshItems([field.item]);
+        itemsRepository.onFieldSaved(field, val, saveSequence || 0);
       }
     },
-    [state.itemsRepository, executeOp],
+    [itemsRepository, executeOp],
   );
 
   const executeEditFieldDebounced = useDebouncedCallback(
@@ -430,7 +445,7 @@ export function getOperationsContext(
       rawValue?: string | null;
       refresh?: "none" | "immediate" | "delayed" | "waitForQuietPeriod";
     }) => {
-      const saveSequence = await state.itemsRepository.updateFieldValue(
+      const saveSequence = await itemsRepository.updateFieldValue(
         field,
         state.user ?? { name: "unknown", ai: false },
         true,
@@ -454,10 +469,10 @@ export function getOperationsContext(
     rawValue: string | null | undefined,
     value: string | undefined,
   ) {
-    const item = await state.itemsRepository.getItem(field.item);
+    const item = await itemsRepository.getItem(field.item);
     if (!item) return;
 
-    const fieldItem = await state.itemsRepository.getItem({
+    const fieldItem = await itemsRepository.getItem({
       id: field.fieldId,
       language: "en",
       version: 0,
@@ -557,7 +572,7 @@ export function getOperationsContext(
               (x: ItemDescriptor | undefined): x is ItemDescriptor => x != null,
             );
 
-          await state.itemsRepository.refreshItems(itemsToRefresh);
+          await itemsRepository.refreshItems(itemsToRefresh);
           await state.refreshHistory(item);
           return true;
         } else {
@@ -613,7 +628,7 @@ export function getOperationsContext(
             (x: ItemDescriptor | undefined): x is ItemDescriptor => x != null,
           );
 
-        await state.itemsRepository.refreshItems(itemsToRefresh);
+        await itemsRepository.refreshItems(itemsToRefresh);
         await state.refreshHistory(item);
         return true;
       } else {
@@ -628,9 +643,9 @@ export function getOperationsContext(
 
   const deleteItems = useCallback(
     async (items: ItemDescriptor[]) => {
-      const itemsToDelete = await state.itemsRepository.getItems(items);
+      const itemsToDelete = await itemsRepository.getItems(items);
       await executeDeleteItems(items);
-      state.itemsRepository.onItemsDeleted(
+      itemsRepository.onItemsDeleted(
         itemsToDelete.map((x) => ({
           item: x.descriptor,
           parentId: x.parentId,
@@ -638,14 +653,14 @@ export function getOperationsContext(
       );
       state.requestRefresh("immediate");
     },
-    [state.itemsRepository],
+    [itemsRepository],
   );
 
   const moveItems = useCallback(
     async (items: ItemDescriptor[], target: ItemDescriptor, index: number) => {
       await executeMoveItems(items, target, index);
     },
-    [state.itemsRepository],
+    [itemsRepository],
   );
 
   const createItem = useCallback(
@@ -653,10 +668,10 @@ export function getOperationsContext(
       const result = await executeCreateItem(parent, templateId, name);
       if (handleErrorResult(result as ExecutionResult<unknown>, ui, state))
         return;
-      state.itemsRepository.refreshItems([parent]);
+      itemsRepository.refreshItems([parent]);
       return result.data as ItemDescriptor;
     },
-    [state.itemsRepository],
+    [itemsRepository],
   );
 
   const createVersion = useCallback(
@@ -671,7 +686,7 @@ export function getOperationsContext(
       const result = await executeCopyItems(items, target, index);
       return result.data as ItemDescriptor[];
     },
-    [state.itemsRepository],
+    [itemsRepository],
   );
 
   const duplicateItem = useCallback(
@@ -679,10 +694,10 @@ export function getOperationsContext(
       const result = await executeDuplicateItem(item, target, name);
       if (handleErrorResult(result as ExecutionResult<unknown>, ui, state))
         return;
-      state.itemsRepository.refreshItems([target]);
+      itemsRepository.refreshItems([target]);
       return result.data as ItemDescriptor;
     },
-    [state.itemsRepository],
+    [itemsRepository],
   );
 
   const onFieldBlur = useCallback(() => {
@@ -691,6 +706,10 @@ export function getOperationsContext(
     lastOp.current = undefined;
   }, []);
 
+  // Extract state values to avoid object reference changes
+  const mode = state.mode;
+  const page = state.page;
+
   const ops = useMemo(
     () => ({
       addComponent,
@@ -728,10 +747,10 @@ export function getOperationsContext(
       createItem,
       createVersion,
       duplicateComponents,
-      undoing.current,
+
       moveItems,
-      state.mode,
-      state.page,
+      mode,
+      page,
       copyItems,
       duplicateItem,
       onFieldBlur,
@@ -746,7 +765,7 @@ export function getOperationsContext(
         executingEditOperations,
       },
     }),
-    [executingEditOperations, editOperationExecuted, ops, undoing],
+    [executingEditOperations, editOperationExecuted, ops],
   );
 }
 

package/src/editor/commands/componentCommands.tsx

@@ -24,6 +24,7 @@ import {
   Trash2,
   TriangleAlert,
 } from "lucide-react";
+import { AiPromptPopover } from "../ai/AiPromptPopover";
 
 export type ComponentCommandData = CommandData & {
   components: Component[];
@@ -134,13 +135,18 @@ function getAiCommand(
 ): ComponentCommand {
   return {
     id: "ai",
-    icon: <Sparkles size={defaultIconSize} />,
+    icon: (
+      <AiPromptPopover components={components}>
+        <Sparkles size={defaultIconSize} />
+      </AiPromptPopover>
+    ),
     label: "AI",
-    disabled: (c) => components.length !== 1,
+    disabled: (c) => components.length === 0,
 
     execute: async (context: CommandContext<any>) => {
+      // The AiPromptPopover handles the click interaction directly
+      // No need to execute anything here as the popover trigger handles it
       const event = context.event!;
-      editContext.showAiPopup(event as any);
       event.preventDefault();
       event.stopPropagation();
     },

package/src/editor/commands/itemCommands.tsx

@@ -90,7 +90,6 @@ export const renameItemCommand: ItemCommand = {
     false,
   execute: async (context: ItemCommandContext) => {
     const item = context.data?.items[0];
-
     if (!item) return;
     const newName = await context.openDialog<string, ItemNameDialogProps>(
       ItemNameDialog,

package/src/editor/component-designer/aiContext.ts

@@ -9,8 +9,6 @@ export function createDesignerAiContext({
   editContext: EditContextType;
 }): AiContext {
   return {
-    //configuration.services.editorService.baseUrl +
-    endpoint: "/alpaca/ai/designerprompt",
     callback: () => {
       editContext.requestRefresh();
     },

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

@@ -56,7 +56,7 @@ export function DropLinkEditor({
       optionLabel="name"
       optionValue="id"
       placeholder="Select"
-      className="md:w-14rem w-full"
+      className="md:w-14rem w-full bg-gray-5"
       virtualScrollerOptions={{
         lazy: true,
         onLazyLoad: onLazyLoad,

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

@@ -6,8 +6,9 @@ import {
   useEditContextRef,
   useModifiedFieldsContext,
 } from "../client/editContext";
+import { useFieldModification } from "../client/fieldModificationStore";
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, useMemo } from "react";
 
 import { Field } from "../pageModel";
 
@@ -27,13 +28,12 @@ export function MultiLineText({
   const fieldItem = field.descriptor.item;
   const [value, setValue] = useState(field.value as string);
 
-  const modifiedFieldsContext = useModifiedFieldsContext();
-  const modifiedField = modifiedFieldsContext?.modifiedFields.find(
-    (x) =>
-      x.fieldId === field.id &&
-      x.item.id === fieldItem.id &&
-      x.item.language === fieldItem.language &&
-      x.item.version === fieldItem.version,
+  // Field-specific subscription - only rerenders when THIS field changes
+  const { modifiedField } = useFieldModification(
+    field.id,
+    fieldItem.id, 
+    fieldItem.language,
+    fieldItem.version
   );
 
   useEffect(() => {
@@ -41,7 +41,7 @@ export function MultiLineText({
       if (field.isHistoric) setValue(field.value as string);
       else setValue(modifiedField?.value ?? (field.value as string));
     }
-  }, [field.value, modifiedFieldsContext?.modifiedFields]);
+  }, [field.value, field.isHistoric, modifiedField?.value]);
 
   if (!editContextRef.current) return;
 

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

@@ -4,6 +4,7 @@ import {
   useEditContextRef,
   useModifiedFieldsContext,
 } from "../client/editContext";
+import { useFieldModification } from "../client/fieldModificationStore";
 
 import { useThrottledCallback } from "use-debounce";
 import { useEffect, useRef, useState, useMemo } from "react";
@@ -46,7 +47,6 @@ export function RichTextEditorComponent({
   updateFieldValue?: (value: string) => void;
 }) {
   const editContextRef = useEditContextRef();
-  const modifiedFieldsContext = useModifiedFieldsContext();
   const [focused, setFocused] = useState(false);
   const [value, setValue] = useState(field.value as string);
   const editorRef = useRef<HTMLDivElement>(null);
@@ -56,12 +56,12 @@ export function RichTextEditorComponent({
   const fieldItem = field.descriptor.item;
   if (!fieldItem) return null;
 
-  const modifiedField = modifiedFieldsContext?.modifiedFields.find(
-    (x) =>
-      x.fieldId === field.id &&
-      x.item.id === fieldItem.id &&
-      x.item.language === fieldItem.language &&
-      x.item.version === fieldItem.version,
+  // Field-specific subscription - only rerenders when THIS field changes
+  const { modifiedField } = useFieldModification(
+    field.id,
+    fieldItem.id, 
+    fieldItem.language,
+    fieldItem.version
   );
 
   useEffect(() => {
@@ -75,7 +75,7 @@ export function RichTextEditorComponent({
     if (!isEditorActive && newValue !== value) {
       setValue(newValue);
     }
-  }, [field.value, modifiedFieldsContext?.modifiedFields, focused]);
+  }, [field.value, field.isHistoric, modifiedField?.value, focused, value]);
 
   const debouncedSetFieldvalue = useThrottledCallback((value) => {
     if (updateFieldValue) {

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

@@ -7,8 +7,9 @@ import {
   useModifiedFieldsContext,
   SelectionRange,
 } from "../client/editContext";
+import { useFieldModification } from "../client/fieldModificationStore";
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, useMemo } from "react";
 
 import { Field } from "../pageModel";
 
@@ -23,7 +24,6 @@ export function SingleLineText({
 }) {
   const editContextRef = useEditContextRef();
   const editContext = useEditContext();
-  const modifiedFieldsContext = useModifiedFieldsContext();
   const inputRef = useRef<HTMLInputElement>(null);
   // const [selectionStart, setSelectionStart] = useState(0);
   // const [selectionEnd, setSelectionEnd] = useState(0);
@@ -32,12 +32,12 @@ export function SingleLineText({
   const fieldItem = field.descriptor.item;
   const [value, setValue] = useState<string | undefined>(undefined);
 
-  const modifiedField = modifiedFieldsContext?.modifiedFields.find(
-    (x) =>
-      x.fieldId === field.id &&
-      x.item.id === fieldItem.id &&
-      x.item.language === fieldItem.language &&
-      x.item.version === fieldItem.version,
+  // Field-specific subscription - only rerenders when THIS field changes
+  const { modifiedField } = useFieldModification(
+    field.id,
+    fieldItem.id, 
+    fieldItem.language,
+    fieldItem.version
   );
 
   useEffect(() => {
@@ -47,7 +47,7 @@ export function SingleLineText({
         setValue(modifiedField?.value ?? (field.value as string));
       }
     }
-  }, [field.value, modifiedFieldsContext?.modifiedFields]);
+  }, [field.value, field.isHistoric, modifiedField?.value]);
 
   if (!fieldItem) return;
 

package/src/editor/hooks/useEditorSettings.ts

@@ -0,0 +1,68 @@
+import { useEditContext } from "../client/editContext";
+import { EditorSettings } from "../../types";
+
+/**
+ * Hook to access general editor settings like Sitecore name validation
+ * @returns EditorSettings containing validation patterns and character restrictions
+ */
+export function useEditorSettings(): EditorSettings | undefined {
+  const editContext = useEditContext();
+  return editContext?.editorSettings;
+}
+
+/**
+ * Hook to validate item names against Sitecore settings
+ * @returns Validation functions for item names
+ */
+export function useItemNameValidation() {
+  const editorSettings = useEditorSettings();
+
+  const validateItemName = (name: string): { isValid: boolean; message?: string } => {
+    if (!editorSettings) {
+      return { isValid: true }; // No settings loaded, assume valid
+    }
+
+    // Check invalid characters
+    if (editorSettings.invalidItemNameChars) {
+      const invalidChars = editorSettings.invalidItemNameChars.replace(/\\/g, '');
+      for (const char of invalidChars) {
+        if (name.includes(char)) {
+          return {
+            isValid: false,
+            message: `Item name cannot contain the character: ${char}`
+          };
+        }
+      }
+    }
+
+    // Check name validation regex
+    if (editorSettings.itemNameValidation) {
+      try {
+        const regex = new RegExp(editorSettings.itemNameValidation);
+        if (!regex.test(name)) {
+          return {
+            isValid: false,
+            message: `Item name must satisfy the pattern: ${editorSettings.itemNameValidation}`
+          };
+        }
+      } catch (error) {
+        console.warn('Invalid regex pattern for item name validation:', error);
+      }
+    }
+
+    // Check maximum length
+    if (editorSettings.maxItemNameLength && name.length > editorSettings.maxItemNameLength) {
+      return {
+        isValid: false,
+        message: `Item name cannot exceed ${editorSettings.maxItemNameLength} characters`
+      };
+    }
+
+    return { isValid: true };
+  };
+
+  return {
+    validateItemName,
+    settings: editorSettings
+  };
+}

package/src/editor/menubar/ItemActionsMenu.tsx

@@ -53,11 +53,11 @@ export function ItemActionsMenu({ isMobile }: { isMobile: boolean }) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild className="cursor-pointer">
-        <div className="p-1">
+        <div className="p-1" data-testid="item-actions-menu-trigger">
           <VerticalDotsIcon />
         </div>
       </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-64" align="start">
+      <DropdownMenuContent className="w-64" align="start" data-testid="item-actions-menu-content">
         {itemGroups.map((group, groupIndex) => (
           <div key={`group-${group.id || groupIndex}`}>
             {group.items
@@ -69,6 +69,7 @@ export function ItemActionsMenu({ isMobile }: { isMobile: boolean }) {
                     item.command?.({});
                   }}
                   className="flex items-center gap-2"
+                  data-testid={`item-action-${item.id}`}
                 >
                   {typeof item.icon === "string" ? (
                     <i className={item.icon} style={{ fontSize: "1rem" }} />

package/src/editor/menubar/PageSelector.tsx

@@ -185,7 +185,7 @@ export function PageSelector({
             data-testid="page-selector-button"
           >
             <div className="flex flex-col">
-              <div className="text-sm font-medium">
+              <div className="text-sm font-medium" data-testid="item-name">
                 {item?.name || "unknown"}
               </div>
               <div className="text-xs text-gray-500">{item?.path}</div>

package/src/editor/menubar/toolbar-sections/EditControls.tsx

@@ -32,6 +32,7 @@ export function EditControls({
           icon={<Pencil className="h-6 w-6 p-1" strokeWidth={1} />}
           label="Edit"
           size="large"
+          data-testid="edit-mode-button"
           selected={editContext.mode === "edit"}
           onClick={() => editContext.setMode("edit")}
         />

package/src/editor/menubar/toolbar-sections/InsertControls.tsx

@@ -15,6 +15,7 @@ export function InsertControls() {
 
   return (
     <SimpleIconButton
+      data-testid="insert-component-button"
       icon={<Plus className="h-6 w-6 p-1" strokeWidth={1} />}
       label="Add Component"
       size="large"

package/src/editor/menubar/toolbar-sections/UtilityControls.tsx

@@ -17,12 +17,14 @@ export function UtilityControls() {
         icon={<EnterFullScreenIcon className="h-6 w-6 p-1" />}
         label="Fullscreen"
         size="large"
+        data-testid="fullscreen-button"
         onClick={() => pageViewContext.setFullscreen(true)}
       />
       <SimpleIconButton
         icon={<Layers className="h-6 w-6 p-1" strokeWidth={1} />}
         label="Component Navigator"
         size="large"
+        data-testid="component-navigator-button"
         selected={editContext.showRightSidebar}
         onClick={() =>
           editContext.setShowRightSidebar(!editContext.showRightSidebar)