@alpaca-editor/core 1.0.4086 → 1.0.4089

package/src/editor/control-center/setup-steps/SettingsSetupStep.tsx

@@ -0,0 +1,176 @@
+import React, { useCallback, useState } from "react";
+import { Card } from "../../../components/ui/card";
+import { Button } from "../../../components/ui/button";
+import { useEditContext } from "../../client/editContext";
+import { ItemDescriptor } from "../../pageModel";
+import { getChildren } from "../../services/contentService";
+import type { ItemTreeNodeData } from "../../services/contentService";
+import { contentItemId } from "../../../config/config";
+import { CheckCircle, AlertCircle, Settings, RefreshCw } from "lucide-react";
+
+type StepState = "idle" | "checking" | "success" | "error";
+
+function findByName(
+  items: ItemTreeNodeData[],
+  name: string,
+): ItemTreeNodeData | undefined {
+  const target = name.toLowerCase();
+  return items.find(
+    (x) =>
+      (((x.displayName as string) || x.name || "") as string).toLowerCase() ===
+      target,
+  );
+}
+
+export function SettingsSetupStep() {
+  const editContext = useEditContext();
+  const [settingsState, setSettingsState] = useState<StepState>("checking");
+  const [settingsItem, setSettingsItem] = useState<ItemDescriptor | null>(null);
+  const [settingsError, setSettingsError] = useState<string | null>(null);
+  const [creatingSettings, setCreatingSettings] = useState(false);
+
+  const userLang = editContext?.contentEditorItem?.language || "en";
+
+  const statusIcon = useCallback((state: StepState) => {
+    if (state === "success")
+      return <CheckCircle className="h-4 w-4 text-green-600" strokeWidth={1} />;
+    if (state === "error")
+      return <AlertCircle className="h-4 w-4 text-red-600" strokeWidth={1} />;
+    return (
+      <RefreshCw
+        className="h-4 w-4 animate-spin text-amber-600"
+        strokeWidth={1}
+      />
+    );
+  }, []);
+
+  const resolvePathUnderContent = useCallback(
+    async (names: string[]): Promise<ItemDescriptor | null> => {
+      if (!editContext?.sessionId) return null;
+      let currentId = contentItemId;
+      for (const segment of names) {
+        const children = (await getChildren(
+          currentId,
+          editContext.sessionId,
+          [],
+          false,
+          userLang,
+          "path",
+        )) as unknown as ItemTreeNodeData[];
+        const next = findByName(children, segment);
+        if (!next) return null;
+        currentId = next.id;
+      }
+      return {
+        id: currentId,
+        language: userLang,
+        version: 0,
+      } as ItemDescriptor;
+    },
+    [editContext?.sessionId, userLang],
+  );
+
+  const checkSettingsItem = useCallback(async () => {
+    try {
+      setSettingsState("checking");
+      setSettingsError(null);
+      setSettingsItem(null);
+
+      const editorItem = await resolvePathUnderContent(["Settings", "Editor"]);
+      if (editorItem) {
+        setSettingsItem(editorItem);
+        setSettingsState("success");
+        return;
+      }
+
+      setSettingsState("error");
+      setSettingsError(
+        "Editor settings item not found at /sitecore/content/Settings/Editor",
+      );
+    } catch (e: any) {
+      setSettingsState("error");
+      setSettingsError(e?.message || "Failed to check settings item");
+    }
+  }, [resolvePathUnderContent]);
+
+  const createSettingsItem = useCallback(async () => {
+    if (!editContext?.itemsRepository) return;
+    try {
+      setCreatingSettings(true);
+      setSettingsError(null);
+
+      const parentDescriptor: ItemDescriptor = {
+        id: "{2DE1F76B-39F0-49A0-8589-8F360E0B3F7E}",
+        language: userLang,
+        version: 0,
+      } as any;
+
+      const branchOrTemplateId = "f133cae9-8fbc-4cdf-868e-321a533dec5b";
+
+      const created = await editContext.operations.createItem(
+        parentDescriptor,
+        branchOrTemplateId,
+        "Editor",
+      );
+
+      if (created) {
+        setSettingsItem(created);
+        setSettingsState("success");
+      } else {
+        setSettingsState("error");
+        setSettingsError("Failed to create settings item");
+      }
+    } catch (e: any) {
+      setSettingsState("error");
+      setSettingsError(e?.message || "Failed to create settings item");
+    } finally {
+      setCreatingSettings(false);
+    }
+  }, [editContext, userLang]);
+
+  React.useEffect(() => {
+    checkSettingsItem();
+  }, [checkSettingsItem]);
+
+  return (
+    <Card
+      icon={<Settings strokeWidth={1} className="h-5 w-5" />}
+      title="Editor settings"
+      description="Checks presence of /sitecore/content/Settings/Editor and allows creating it."
+    >
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2">
+          {statusIcon(settingsItem ? "success" : settingsState)}
+          <span className="text-sm text-gray-700">
+            {settingsItem
+              ? "Settings item present"
+              : settingsState === "error"
+                ? "Settings item missing"
+                : "Checking..."}
+          </span>
+        </div>
+        {!settingsItem && (
+          <Button
+            size="sm"
+            onClick={createSettingsItem}
+            disabled={creatingSettings}
+          >
+            {creatingSettings ? (
+              <RefreshCw strokeWidth={1} className="h-4 w-4 animate-spin" />
+            ) : (
+              <CheckCircle strokeWidth={1} className="h-4 w-4" />
+            )}
+            Create
+          </Button>
+        )}
+      </div>
+      {settingsError && (
+        <div className="mt-2 rounded border border-yellow-200 bg-yellow-50 p-2 text-xs whitespace-pre-wrap text-yellow-800">
+          {settingsError}
+        </div>
+      )}
+    </Card>
+  );
+}
+
+export default SettingsSetupStep;

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

@@ -58,7 +58,6 @@ export function ImageFieldEditor({
               refresh: "waitForQuietPeriod",
             });
           }}
-          onBlur={editContext.operations.onFieldBlur}
         />
       </div>
     </div>

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

@@ -80,7 +80,6 @@ export function MultiLineText({
         setValue(e.target.value);
         updateFieldValue(e.target.value as string);
       }}
-      onBlur={editContextRef.current?.operations.onFieldBlur}
     />
   );
 }

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

@@ -114,7 +114,6 @@ export function PictureFieldEditor({
               refresh: "waitForQuietPeriod",
             });
           }}
-          onBlur={editContext.operations.onFieldBlur}
         />
       </div>
     </div>

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

@@ -48,7 +48,6 @@ export function RawEditor({
         debouncedSetFieldvalue(e.target.value as string);
         // field.value = e.target.value;
       }}
-      onBlur={editContext?.operations.onFieldBlur}
     />
   );
 }

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

@@ -110,7 +110,6 @@ export function RichTextEditorComponent({
         onFocus={() => setFocused(true)}
         onBlur={() => setFocused(false)}
         readOnly={readOnly}
-        placeholder="Enter text here..."
         profile={editorProfile}
         showControls={showControls}
       />

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

@@ -181,7 +181,6 @@ export function SingleLineText({
         style={{ width: "100%" }}
         onChange={handleChange}
         onSelect={handleSelect}
-        onBlur={editContextRef.current?.operations.onFieldBlur}
       />
       {isManualRefreshEnabled && (
         <button

package/src/editor/field-types/richtext/components/ReactSlate.tsx

@@ -40,7 +40,10 @@ import { LinkEditorDialog } from "../../../LinkEditorDialog";
 
 import { htmlToSlate, slateToHtml } from "../utils/conversion";
 import { createPluginsFromConfig } from "../config/pluginFactory";
-import { createKeyboardHandler, generateInternalLinkUrl } from "../utils/plugins";
+import {
+  createKeyboardHandler,
+  generateInternalLinkUrl,
+} from "../utils/plugins";
 import { normalizeUrl } from "../../../utils/urlUtils";
 
 import { useCachedSimplifiedProfile } from "../hooks/useProfileCache";
@@ -774,11 +777,15 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
         textAlign: element.align || "left",
       };
 
-    if (element.type === "link") {
-      const isInternal = element.link?.type === "internal";
-      const url = isInternal
-        ? generateInternalLinkUrl(element.link?.itemId, element.link?.targetItemLongId, element.link?.queryString)
-        : normalizeUrl(element.url || element.link?.url || "#");
+      if (element.type === "link") {
+        const isInternal = element.link?.type === "internal";
+        const url = isInternal
+          ? generateInternalLinkUrl(
+              element.link?.itemId,
+              element.link?.targetItemLongId,
+              element.link?.queryString,
+            )
+          : normalizeUrl(element.url || element.link?.url || "#");
 
         return (
           <a
@@ -965,6 +972,7 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
         )}
         <Editable
           className={classNames(
+            "border-gray-3 min-h-8 rounded-sm border",
             readOnly ? "bg-gray-4" : "bg-gray-5",
             "focus-shadow p-2",
             "slate-editable",

package/src/editor/field-types/richtext/utils/profileServiceCache.ts

@@ -1,11 +1,14 @@
-import { RichTextEditorProfile } from '../types';
-import { mapSitecoreProfileJsonToSlate } from './profileMapper';
+import { RichTextEditorProfile } from "../types";
+import { mapSitecoreProfileJsonToSlate } from "./profileMapper";
 
 // Single cache for parsed profiles
 const parsedProfileCache = new Map<string, RichTextEditorProfile | null>();
 
 // Cache for in-flight requests to prevent duplicate calls
-const inflightRequests = new Map<string, Promise<RichTextEditorProfile | null>>();
+const inflightRequests = new Map<
+  string,
+  Promise<RichTextEditorProfile | null>
+>();
 
 // Cache statistics
 interface ServiceCacheStats {
@@ -17,7 +20,7 @@ interface ServiceCacheStats {
 let serviceStats: ServiceCacheStats = {
   hits: 0,
   misses: 0,
-  cacheSize: 0
+  cacheSize: 0,
 };
 
 /**
@@ -26,60 +29,67 @@ let serviceStats: ServiceCacheStats = {
  */
 export async function getCachedParsedProfile(
   profilePath: string,
-  serviceCall: (path: string) => Promise<any>
+  serviceCall: (path: string) => Promise<any>,
 ): Promise<RichTextEditorProfile | null> {
-  console.log(`[ProfileServiceCache] Getting parsed profile for path: ${profilePath}`);
-  
+  //console.log(`[ProfileServiceCache] Getting parsed profile for path: ${profilePath}`);
+
   // Check if we already have a cached result
   if (parsedProfileCache.has(profilePath)) {
     serviceStats.hits++;
     const cachedResult = parsedProfileCache.get(profilePath)!;
-    console.log(`[ProfileServiceCache] Cache hit for ${profilePath}`);
+    //console.log(`[ProfileServiceCache] Cache hit for ${profilePath}`);
     return cachedResult;
   }
 
   // Check if there's already an in-flight request for this profile
   if (inflightRequests.has(profilePath)) {
     serviceStats.hits++;
-    console.log(`[ProfileServiceCache] In-flight request found for ${profilePath}`);
+    //console.log(
+    //  `[ProfileServiceCache] In-flight request found for ${profilePath}`,
+    //);
     return inflightRequests.get(profilePath)!;
   }
 
   // Make the service call, parse, and cache the result
   serviceStats.misses++;
-  console.log(`[ProfileServiceCache] Making service call for ${profilePath}`);
-  
+  // console.log(`[ProfileServiceCache] Making service call for ${profilePath}`);
+
   const servicePromise = serviceCall(profilePath)
-    .then(response => {
-      console.log(`[ProfileServiceCache] Service call completed for ${profilePath}`, response);
-      
+    .then((response) => {
+      //console.log(`[ProfileServiceCache] Service call completed for ${profilePath}`, response);
+
       let parsedProfile: RichTextEditorProfile | null = null;
-      
+
       if (response?.data) {
         const jsonString = JSON.stringify(response.data);
-        console.log(`[ProfileServiceCache] Parsing profile for ${profilePath}, JSON length: ${jsonString.length}`);
-        
+        //console.log(`[ProfileServiceCache] Parsing profile for ${profilePath}, JSON length: ${jsonString.length}`);
+
         parsedProfile = mapSitecoreProfileJsonToSlate(jsonString);
-        
+
         if (parsedProfile) {
-          console.log(`[ProfileServiceCache] Successfully parsed profile for ${profilePath}`);
+          //console.log(`[ProfileServiceCache] Successfully parsed profile for ${profilePath}`);
         } else {
-          console.warn(`[ProfileServiceCache] Failed to parse profile for ${profilePath}`);
+          console.warn(
+            `[ProfileServiceCache] Failed to parse profile for ${profilePath}`,
+          );
         }
       }
-      
+
       // Cache the parsed result (even if null)
       parsedProfileCache.set(profilePath, parsedProfile);
       serviceStats.cacheSize = parsedProfileCache.size;
-      
+
       // Remove from in-flight requests
       inflightRequests.delete(profilePath);
-      
-      console.log(`[ProfileServiceCache] Cached parsed profile for ${profilePath}, cache size: ${serviceStats.cacheSize}`);
+
+      //console.log(        `[ProfileServiceCache] Cached parsed profile for ${profilePath}, cache size: ${serviceStats.cacheSize}`,      );
       return parsedProfile;
     })
-    .catch(error => {
-      console.error(`[ProfileServiceCache] Service call failed for ${profilePath}:`, error);
+    .catch((error) => {
+      console.error(
+        `[ProfileServiceCache] Service call failed for ${profilePath}:`,
+        error,
+      );
       // Remove from in-flight requests on error
       inflightRequests.delete(profilePath);
       throw error;
@@ -97,7 +107,7 @@ export async function getCachedParsedProfile(
  */
 export async function getCachedRichTextProfile(
   profilePath: string,
-  serviceCall: (path: string) => Promise<any>
+  serviceCall: (path: string) => Promise<any>,
 ): Promise<string | null> {
   const parsedProfile = await getCachedParsedProfile(profilePath, serviceCall);
   return parsedProfile ? JSON.stringify(parsedProfile) : null;
@@ -107,13 +117,13 @@ export async function getCachedRichTextProfile(
  * Clear all caches
  */
 export function clearServiceCache(): void {
-  console.log('[ProfileServiceCache] Clearing all caches');
+  console.log("[ProfileServiceCache] Clearing all caches");
   parsedProfileCache.clear();
   inflightRequests.clear();
   serviceStats = {
     hits: 0,
     misses: 0,
-    cacheSize: 0
+    cacheSize: 0,
   };
 }
 
@@ -124,11 +134,11 @@ export function evictProfileFromServiceCache(profilePath: string): boolean {
   console.log(`[ProfileServiceCache] Evicting profile: ${profilePath}`);
   const evicted = parsedProfileCache.delete(profilePath);
   inflightRequests.delete(profilePath);
-  
+
   if (evicted) {
     serviceStats.cacheSize = parsedProfileCache.size;
   }
-  
+
   return evicted;
 }
 
@@ -151,4 +161,4 @@ export function getCachedProfilePaths(): string[] {
  */
 export function isProfilePathCached(profilePath: string): boolean {
   return parsedProfileCache.has(profilePath);
-} 
+}

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

@@ -12,6 +12,7 @@ export function CompareControls() {
       icon={<CompareIcon className="h-6 w-6 p-1" />}
       label="Compare"
       size="large"
+      data-testid="compare-mode-button"
       className={
         editContext.compareMode ? "text-gray-600" : "hover:text-gray-600"
       }

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

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

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

@@ -48,6 +48,7 @@ export function ViewportControls() {
           icon={<CompareIcon className="h-6 w-6 p-1" />}
           label="Compare"
           size="large"
+          data-testid="compare-mode-button"
           className={
             editContext.compareMode ? "text-gray-600" : "hover:text-gray-600"
           }

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

@@ -516,7 +516,7 @@ export function InlineEditor({
       // First, process modified fields directly (from updateFields functionality)
       modifiedFieldsContext?.modifiedFields.forEach((field) => {
         const elements = doc.querySelectorAll(
-          `[data-fieldid="${field.fieldId}"][data-itemid="${field.item.id}"][data-language="${field.item.language}"][data-version="${field.item.version}"`,
+          `[data-fieldid="${field.fieldId}"][data-itemid="${field.item.id}"][data-language="${field.item.language}"][data-version="${field.item.version}"]`,
         );
 
         elements?.forEach(async (element) => {
@@ -528,7 +528,10 @@ export function InlineEditor({
             const fieldType = realField?.type;
 
             if (fieldType && isTextFieldType(fieldType)) {
-              element.innerHTML = field?.value ? (field.value as string) : "";
+              const next = field?.value ? (field.value as string) : "";
+              if (element.innerHTML !== next) {
+                element.innerHTML = next;
+              }
             }
           }
         });
@@ -590,6 +593,18 @@ export function InlineEditor({
         if (!fieldId || !itemId || !language || !versionStr) return;
         const version = parseInt(versionStr, 10);
 
+        // Skip if this field currently has local modifications to avoid stomping fresh edits
+        const isModifiedNow = modifiedFieldsContext?.modifiedFields?.some(
+          (m: any) =>
+            m.fieldId === fieldId &&
+            m.item.id === itemId &&
+            m.item.language === language &&
+            m.item.version === version,
+        );
+        if (isModifiedNow) {
+          return;
+        }
+
         // Build an item descriptor.
         const descriptor = { id: itemId, language, version };
 
@@ -619,7 +634,9 @@ export function InlineEditor({
 
         // If showSuggestedEdits is false, update with the base value.
         if (!context.showSuggestedEdits && context.mode !== "suggestions") {
-          fieldElement.innerHTML = originalValue;
+          if (fieldElement.innerHTML !== originalValue) {
+            fieldElement.innerHTML = originalValue;
+          }
 
           return;
         }
@@ -672,7 +689,9 @@ export function InlineEditor({
 
         // If showSuggestedEditsDiff is false, show only the merged text
         if (!context.showSuggestedEditsDiff) {
-          fieldElement.innerHTML = mergedValue;
+          if (fieldElement.innerHTML !== mergedValue) {
+            fieldElement.innerHTML = mergedValue;
+          }
           return;
         }
 
@@ -695,7 +714,9 @@ export function InlineEditor({
         });
 
         // Update the element's innerHTML with the diff markup.
-        fieldElement.innerHTML = diffHTML;
+        if (fieldElement.innerHTML !== diffHTML) {
+          fieldElement.innerHTML = diffHTML;
+        }
       });
     };
 
@@ -791,7 +812,9 @@ export function InlineEditor({
       }
 
       // write it in
-      el.innerHTML = value;
+      if (el.innerHTML !== value) {
+        el.innerHTML = value;
+      }
     });
   }, [context.mode, context.showSuggestedEdits, context.suggestedEdits]);
 

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

@@ -1,4 +1,4 @@
-import { useEditContext } from "../client/editContext";
+import { useEditContext, useFieldsEditContext } from "../client/editContext";
 import { getComponentById } from "../componentTreeHelper";
 
 import { FieldList, ItemFields } from "../FieldList";
@@ -28,6 +28,7 @@ export function EditorForm({
   initialActiveTab?: string | null;
 }) {
   const editContext = useEditContext()!;
+  const fieldsContext = useFieldsEditContext();
   if (!pageViewContext) pageViewContext = editContext.pageView;
 
   const insertMode =
@@ -337,7 +338,17 @@ export function EditorForm({
   });
 
   return (
-    <div className="flex h-full flex-col" data-testid="editor-sidepanel">
+    <div
+      className="flex h-full flex-col"
+      data-testid="editor-sidepanel"
+      onClickCapture={(e) => {
+        const target = e.target as HTMLElement;
+        const inField = target.closest("[data-field-id]");
+        if (!inField) {
+          fieldsContext?.setFocusedField(undefined, false);
+        }
+      }}
+    >
       <h1 className="border-gray-3 flex h-12 items-center justify-center border-b p-2">
         {component && component !== pageViewContext.page?.rootComponent && (
           <SimpleIconButton

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

@@ -572,6 +572,10 @@ export function PageViewerFrame({
             );
             // Don't prevent default - we want the browser's natural cursor positioning
           }
+        } else {
+          // Clicked inside iframe but not on a field: clear focused field
+          fieldsContextRef.current?.setFocusedField(undefined, false);
+          fieldsContextRef.current?.setInlineEditingFieldElement(undefined);
         }
       }
       //Forward events so primereact overlays can close
@@ -818,8 +822,8 @@ export function PageViewerFrame({
           () => {
             // Block blur event if it was triggered by clicking on a field
             if (blockBlurEventRef.current < Date.now()) {
-              //editContext.setFocusedField(undefined, false);
               fieldsContextRef.current?.setInlineEditingFieldElement(undefined);
+              editContextRef.current?.operations.onFieldBlur?.();
             } else {
               blockBlurEventRef.current = 0;
             }

package/src/editor/pageModel.ts

@@ -45,6 +45,7 @@ export type ItemDescriptor = {
   language: string;
   version: number;
   name?: string;
+  path?: string;
 };
 
 export type Field = {

package/src/editor/reviews/Comment.tsx

@@ -122,7 +122,7 @@ export function Comment({
           }
           placeholder="Add a comment..."
           submitLabel={comment.isNew ? "Comment" : "Save"}
-          showTagSelector={false} // Tags not shown in sidebar editor for now
+          showTagSelector={true}
         />
       </div>
     );

package/src/editor/reviews/CommentDisplayPopover.tsx

@@ -15,7 +15,6 @@ import {
   resolveComment,
   unresolveComment,
   createOrUpdateComment,
-  getAvailableCommentTags,
 } from "../services/reviewsService";
 import { CommentView } from "./CommentView";
 import { CommentEditor } from "./CommentEditor";
@@ -38,29 +37,10 @@ export function CommentDisplayPopover({
   const [isSaving, setIsSaving] = useState(false);
   const [editText, setEditText] = useState(comment.text);
   const [deleteConfirm, setDeleteConfirm] = useState(false);
-  const [availableTags, setAvailableTags] = useState<
-    { label: string; color: string }[]
-  >([]);
+  const availableTags = editContext?.availableCommentTags || [];
   const contentRef = React.useRef<HTMLDivElement | null>(null);
 
-  // Load available tags
-  React.useEffect(() => {
-    let cancelled = false;
-    const loadTags = async () => {
-      try {
-        const descriptor = editContext?.contentEditorItem?.descriptor;
-        if (!descriptor) return;
-        const tags = await getAvailableCommentTags(descriptor);
-        if (!cancelled) setAvailableTags(tags || []);
-      } catch {
-        if (!cancelled) setAvailableTags([]);
-      }
-    };
-    loadTags();
-    return () => {
-      cancelled = true;
-    };
-  }, [editContext?.contentEditorItem?.descriptor?.id]);
+  // Tags are now provided by editContext.availableCommentTags
 
   const canDelete =
     !comment.isNew && comment.author === editContext?.user?.name;