@alpaca-editor/core 1.0.4069 → 1.0.4073

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

@@ -1,13 +1,12 @@
 "use client";
 
-import { Dropdown, DropdownChangeEvent } from "primereact/dropdown";
-
 import { useEditContext } from "../client/editContext";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useCallback, useMemo } from "react";
 
 import { getLookupSources } from "../services/editService";
 import { TextField } from "../fieldTypes";
 import { ItemIdAndName } from "../pageModel";
+import { Select, SelectOption } from "../../components";
 
 export function DropListEditor({
   field,
@@ -29,7 +28,7 @@ export function DropListEditor({
     onLazyLoad();
   }, [field.descriptor]);
 
-  const onLazyLoad = async () => {
+  const onLazyLoad = useCallback(async () => {
     setLazyLoading(true);
     const options = await getLookupSources(field, editContext.sessionId);
     if (field.value && !options.find((o) => o.name === field.value)) {
@@ -41,44 +40,38 @@ export function DropListEditor({
     }
     setLazyItems(options);
     setLazyLoading(false);
-  };
+  }, [field, editContext.sessionId]);
+
+  // Convert ItemIdAndName[] to SelectOption[] using name for both value and label - memoized
+  const selectOptions: SelectOption[] = useMemo(() => 
+    lazyItems.map((item) => ({
+      value: item.name,
+      label: item.name,
+    })), [lazyItems]
+  );
+
+  // Find the current value or show unknown value - memoized
+  const currentValue = useMemo(() => 
+    lazyItems.find((o) => o.name === field.value)?.name || field.value,
+    [lazyItems, field.value]
+  );
 
   return (
-    <Dropdown
-      value={
-        lazyItems.find((o) => o.name === field.value)?.name ||
-        "[Unknown: " + field.value + "]"
-      }
-      disabled={readOnly}
-      onChange={(e: DropdownChangeEvent) => {
+    <Select
+      value={currentValue}
+      onValueChange={(value) => {
         editContext?.operations.editField({
           field: field.descriptor,
-          rawValue: e.value,
+          rawValue: value,
         });
       }}
-      options={lazyItems}
-      optionLabel="name"
-      optionValue="name"
+      options={selectOptions}
       placeholder="Select"
-      className="md:w-14rem bg-gray-5 w-full"
-      virtualScrollerOptions={{
-        lazy: true,
-        onLazyLoad: onLazyLoad,
-        itemSize: 38,
-        // showLoader: true,
-        loading: lazyLoading,
-        //delay: 250,
-        // loadingTemplate: (options) => {
-        //   return (
-        //     <div
-        //       className="flex align-items-center p-2"
-        //       style={{ height: "38px" }}
-        //     >
-        //       <Skeleton width={options.even ? "60%" : "50%"} height="1rem" />
-        //     </div>
-        //   );
-        // },
-      }}
+      disabled={readOnly}
+      className="md:w-14rem w-full"
+      loading={lazyLoading}
+      onLazyLoad={onLazyLoad}
+      emptyMessage="No options available"
     />
   );
 }

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

@@ -2,9 +2,8 @@
 
 import { InputTextarea } from "primereact/inputtextarea";
 import {
-  useEditContext,
   useEditContextRef,
-  useModifiedFieldsContext,
+  useFieldsEditContextRef,
 } from "../client/editContext";
 import { useFieldModification } from "../client/fieldModificationStore";
 
@@ -22,7 +21,7 @@ export function MultiLineText({
   updateFieldValue: (value: string) => void;
 }) {
   const editContextRef = useEditContextRef();
-  const editContext = useEditContext();
+  const fieldsContextRef = useFieldsEditContextRef();
   const inputRef = useRef<HTMLTextAreaElement>(null);
 
   const fieldItem = field.descriptor.item;
@@ -31,9 +30,9 @@ export function MultiLineText({
   // Field-specific subscription - only rerenders when THIS field changes
   const { modifiedField } = useFieldModification(
     field.id,
-    fieldItem.id, 
+    fieldItem.id,
     fieldItem.language,
-    fieldItem.version
+    fieldItem.version,
   );
 
   useEffect(() => {
@@ -49,13 +48,13 @@ export function MultiLineText({
 
   useEffect(() => {
     setTimeout(() => {
+      const focusedField = fieldsContextRef.current?.focusedField;
       if (
-        !editContextRef.current?.inlineEditingFieldElement &&
-        editContextRef.current?.focusedField?.fieldId === field.id &&
-        editContextRef.current?.focusedField?.item.id === fieldItem.id &&
-        editContextRef.current?.focusedField?.item.language ===
-          fieldItem.language &&
-        editContextRef.current?.focusedField?.item.version === fieldItem.version
+        !fieldsContextRef.current?.inlineEditingFieldElement &&
+        focusedField?.fieldId === field.id &&
+        focusedField?.item.id === fieldItem.id &&
+        focusedField?.item.language === fieldItem.language &&
+        focusedField?.item.version === fieldItem.version
       ) {
         // Only focus if no other element currently has focus (e.g., popover buttons)
         if (
@@ -66,7 +65,7 @@ export function MultiLineText({
         }
       }
     }, 500);
-  }, [editContext?.focusedField]);
+  }, [fieldsContextRef.current?.focusedField]);
 
   return (
     <InputTextarea

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

@@ -1,9 +1,6 @@
 "use client";
 
-import {
-  useEditContextRef,
-  useModifiedFieldsContext,
-} from "../client/editContext";
+import { useEditContextRef, useFieldsEditContext } from "../client/editContext";
 import { useFieldModification } from "../client/fieldModificationStore";
 
 import { useThrottledCallback } from "use-debounce";
@@ -22,8 +19,7 @@ const FALLBACK_PROFILE: RichTextEditorProfile = {
         label: "Basic Formatting",
         display: "buttons" as const,
         showIconsOnly: true,
-        options: [
-        ],
+        options: [],
       },
     ],
   },
@@ -53,9 +49,9 @@ export function RichTextEditorComponent({
   // Field-specific subscription - only rerenders when THIS field changes
   const { modifiedField } = useFieldModification(
     field.id,
-    fieldItem.id, 
+    fieldItem.id,
     fieldItem.language,
-    fieldItem.version
+    fieldItem.version,
   );
 
   useEffect(() => {

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

@@ -4,7 +4,8 @@ import { InputText } from "primereact/inputtext";
 import {
   useEditContext,
   useEditContextRef,
-  useModifiedFieldsContext,
+  useFieldsEditContext,
+  useFieldsEditContextRef,
   SelectionRange,
 } from "../client/editContext";
 import { useFieldModification } from "../client/fieldModificationStore";
@@ -25,6 +26,7 @@ export function SingleLineText({
 }) {
   const editContextRef = useEditContextRef();
   const editContext = useEditContext();
+  const fieldsContextRef = useFieldsEditContextRef();
   const inputRef = useRef<HTMLInputElement>(null);
   // const [selectionStart, setSelectionStart] = useState(0);
   // const [selectionEnd, setSelectionEnd] = useState(0);
@@ -36,9 +38,9 @@ export function SingleLineText({
   // Field-specific subscription - only rerenders when THIS field changes
   const { modifiedField } = useFieldModification(
     field.id,
-    fieldItem.id, 
+    fieldItem.id,
     fieldItem.language,
-    fieldItem.version
+    fieldItem.version,
   );
 
   useEffect(() => {
@@ -79,22 +81,22 @@ export function SingleLineText({
 
     if (
       range.text !== editContext?.selectedRange?.text ||
-      (range.text && range.fieldId !== editContext?.selectedRange.fieldId) ||
-      range.itemId !== editContext.selectedRange.itemId
+      (range.text && range.fieldId !== editContext?.selectedRange?.fieldId) ||
+      range.itemId !== editContext?.selectedRange?.itemId
     ) {
       editContextRef.current?.setSelectedRange(range);
     }
   };
 
   useEffect(() => {
+    const focusedField = fieldsContextRef.current?.focusedField;
     if (
-      editContextRef.current?.focusedField?.fieldId === field.id &&
-      editContextRef.current?.focusedField?.item.id === fieldItem.id &&
-      editContextRef.current?.focusedField?.item.language ===
-        fieldItem.language &&
-      editContextRef.current?.focusedField?.item.version === fieldItem.version
+      focusedField?.fieldId === field.id &&
+      focusedField?.item.id === fieldItem.id &&
+      focusedField?.item.language === fieldItem.language &&
+      focusedField?.item.version === fieldItem.version
     ) {
-      const range = editContextRef.current.selectedRange;
+      const range = editContextRef.current?.selectedRange;
       if (range && inputRef.current) {
         inputRef.current.setSelectionRange(range.startOffset, range.endOffset);
         // setSelectionStart(range.startOffset);
@@ -134,13 +136,13 @@ export function SingleLineText({
 
   useEffect(() => {
     setTimeout(() => {
+      const focusedField = fieldsContextRef.current?.focusedField;
       if (
-        !editContextRef.current?.inlineEditingFieldElement &&
-        editContextRef.current?.focusedField?.fieldId === field.id &&
-        editContextRef.current?.focusedField?.item.id === fieldItem.id &&
-        editContextRef.current?.focusedField?.item.language ===
-          fieldItem.language &&
-        editContextRef.current?.focusedField?.item.version === fieldItem.version
+        !fieldsContextRef.current?.inlineEditingFieldElement &&
+        focusedField?.fieldId === field.id &&
+        focusedField?.item.id === fieldItem.id &&
+        focusedField?.item.language === fieldItem.language &&
+        focusedField?.item.version === fieldItem.version
       ) {
         // Only focus if no other element currently has focus (e.g., popover buttons)
         if (
@@ -151,7 +153,7 @@ export function SingleLineText({
         }
       }
     }, 500);
-  }, [editContext?.focusedField]);
+  }, [fieldsContextRef.current?.focusedField]);
 
   const customSource = (field as any)?.customProperties?.source as
     | string
@@ -185,7 +187,7 @@ export function SingleLineText({
         <button
           type="button"
           title="Re-render"
-          className="absolute right-1 top-1/2 -translate-y-1/2 rounded p-1 text-gray-600 hover:text-gray-900"
+          className="absolute top-1/2 right-1 -translate-y-1/2 rounded p-1 text-gray-600 hover:text-gray-900"
           onClick={() => editContext?.requestRefresh("immediate")}
         >
           <RefreshCw className="h-4 w-4" strokeWidth={1} />

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

@@ -1,7 +1,4 @@
-import {
-  useEditContext,
-  useModifiedFieldsContext,
-} from "../client/editContext";
+import { useEditContext, useFieldsEditContext } from "../client/editContext";
 import { findComponentRect, findFieldElement } from "../utils";
 import { Comment } from "../../types";
 import { useState } from "react";
@@ -21,7 +18,7 @@ export function CommentHighlighting({
 }) {
   const editContext = useEditContext();
   const isSelected = comment.id === editContext?.selectedComment?.id;
-  const modifiedFields = useModifiedFieldsContext();
+  const modifiedFields = useFieldsEditContext();
 
   const [range, setRange] = useState<number[]>([
     comment.rangeStart || 0,
@@ -198,7 +195,8 @@ export function CommentHighlighting({
                   editContext?.setScrollIntoView(comment.itemId);
                   editContext?.select([comment.itemId]);
                   if (comment.fieldId) {
-                    editContext?.setFocusedField(
+                    const fieldsContext = modifiedFields; // alias for readability
+                    fieldsContext?.setFocusedField(
                       {
                         fieldId: comment.fieldId,
                         item: {

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

@@ -1,4 +1,8 @@
-import { EditedField, useEditContext } from "../client/editContext";
+import {
+  EditedField,
+  useEditContext,
+  useFieldsEditContext,
+} from "../client/editContext";
 import { PageViewContext } from "../page-viewer/pageViewContext";
 
 export function FieldEditedIndicator({
@@ -13,6 +17,7 @@ export function FieldEditedIndicator({
   scroll?: number;
 }) {
   const editContext = useEditContext();
+  const fieldsContext = useFieldsEditContext();
   if (!editContext) return null;
 
   const fieldElements =
@@ -24,7 +29,7 @@ export function FieldEditedIndicator({
   return (
     <>
       {[...fieldElements]
-        .filter((x) => x != editContext.inlineEditingFieldElement)
+        .filter((x) => x != fieldsContext?.inlineEditingFieldElement)
         .map((element) => (
           <SingleFieldEditedIndicator
             element={element}

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

@@ -1,4 +1,4 @@
-import { useEditContext, useModifiedFieldsContext } from "../client/editContext";
+import { useEditContext, useFieldsEditContext } from "../client/editContext";
 import { PageViewContext } from "../page-viewer/pageViewContext";
 import { FieldEditedIndicator } from "./FieldEditedIndicator";
 
@@ -12,7 +12,7 @@ export function FieldEditedIndicators({
   scroll?: number;
 }) {
   const editContext = useEditContext();
-  const modifiedFieldsContext = useModifiedFieldsContext();
+  const modifiedFieldsContext = useFieldsEditContext();
 
   if (!editContext || !modifiedFieldsContext) return null;
 

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

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import {
   useEditContext,
-  useModifiedFieldsContext,
+  useFieldsEditContext,
   useEditContextRef,
 } from "../client/editContext";
 import { useThrottledCallback } from "use-debounce";
@@ -22,7 +22,7 @@ export function InlineEditor({
 }) {
   const context = useEditContext();
   const contextRef = useEditContextRef();
-  const modifiedFieldsContext = useModifiedFieldsContext();
+  const modifiedFieldsContext = useFieldsEditContext();
   const [cursorSpanId] = useState(
     () => `cursor-indicator-${Math.random().toString(36).substring(2, 9)}`,
   );
@@ -52,7 +52,7 @@ export function InlineEditor({
       // Don't include our cursor indicator in the saved value
       const iframeDocument =
         pageViewContext.editorIframe?.contentWindow?.document;
-      const element = context.inlineEditingFieldElement;
+      const element = modifiedFieldsContext?.inlineEditingFieldElement;
       const isRichText = element?.getAttribute("data-is-richtext") === "true";
 
       // Clone element to avoid modifying the original
@@ -102,7 +102,7 @@ export function InlineEditor({
 
   useEffect(() => {
     if (!context || compareView || context.mode === "preview") return;
-    const element = context.inlineEditingFieldElement;
+    const element = modifiedFieldsContext?.inlineEditingFieldElement;
 
     const editableElements =
       pageViewContext.editorIframe?.contentWindow?.document.querySelectorAll(
@@ -110,7 +110,7 @@ export function InlineEditor({
       );
 
     editableElements?.forEach((element) => {
-      if (element !== context.inlineEditingFieldElement)
+      if (element !== modifiedFieldsContext?.inlineEditingFieldElement)
         element.setAttribute("contenteditable", "false");
     });
 
@@ -267,7 +267,7 @@ export function InlineEditor({
     }
 
     async function updateFocusedFieldContent() {
-      const element = context?.inlineEditingFieldElement;
+      const element = modifiedFieldsContext?.inlineEditingFieldElement;
       if (!element) return;
 
       const savedPosition = saveCaretPosition(element);
@@ -285,7 +285,8 @@ export function InlineEditor({
       const descriptor = { id: itemId, language, version };
 
       // Retrieve the current field value from the repository.
-      const loadedItem = await context.itemsRepository.getItem(descriptor);
+      const loadedItem =
+        await contextRef.current?.itemsRepository.getItem(descriptor);
       if (!loadedItem) return;
       // Get the baseline value from the repository.
       const repositoryField = loadedItem.fields.find(
@@ -307,8 +308,10 @@ export function InlineEditor({
 
       // If suggestions mode is active, merge all suggestions for this field.
 
-      if (context.mode === "suggestions") {
-        const fieldSuggestions = context.suggestedEdits.filter(
+      if (contextRef.current?.mode === "suggestions") {
+        const fieldSuggestions = (
+          contextRef.current?.suggestedEdits ?? []
+        ).filter(
           (s: any) =>
             s.fieldId === fieldId &&
             s.itemId === itemId &&
@@ -380,7 +383,7 @@ export function InlineEditor({
         cursorElement.parentNode?.removeChild(cursorElement);
       }
     };
-  }, [context?.inlineEditingFieldElement]);
+  }, [modifiedFieldsContext?.inlineEditingFieldElement]);
 
   function saveCaretPosition(
     editableElement: HTMLElement,
@@ -508,7 +511,10 @@ export function InlineEditor({
         );
 
         elements?.forEach(async (element) => {
-          if (element && element !== context?.inlineEditingFieldElement) {
+          if (
+            element &&
+            element !== modifiedFieldsContext?.inlineEditingFieldElement
+          ) {
             const realField = await context.itemsRepository.getField(field);
             const fieldType = realField?.type;
 
@@ -564,7 +570,7 @@ export function InlineEditor({
         if (!fieldElement) return;
 
         // Do not update if this field is currently focused.
-        if (fieldElement === context.inlineEditingFieldElement) {
+        if (fieldElement === modifiedFieldsContext?.inlineEditingFieldElement) {
           return;
         }
 
@@ -689,7 +695,7 @@ export function InlineEditor({
     context.mode,
     modifiedFieldsContext?.modifiedFields,
     context?.itemsRepository.revision,
-    context?.inlineEditingFieldElement,
+    modifiedFieldsContext?.inlineEditingFieldElement,
     context?.showSuggestedEdits,
     context?.suggestedEdits,
     pageViewContext.pageItemDescriptor,
@@ -715,7 +721,7 @@ export function InlineEditor({
       // don't stomp on the one that's live‑editing (only in non-preview modes)
       if (
         context.mode !== "preview" &&
-        el === context.inlineEditingFieldElement
+        el === modifiedFieldsContext?.inlineEditingFieldElement
       )
         return;
 

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

@@ -1,7 +1,4 @@
-import {
-  useEditContext,
-  useModifiedFieldsContext,
-} from "../client/editContext";
+import { useEditContext, useFieldsEditContext } from "../client/editContext";
 import { findFieldElement } from "../utils";
 import { SuggestedEdit } from "../../types";
 import { useState } from "react";
@@ -21,7 +18,7 @@ export function SuggestionHighlighting({
   iframe: HTMLIFrameElement;
 }) {
   const editContext = useEditContext();
-  const modifiedFields = useModifiedFieldsContext();
+  const modifiedFields = useFieldsEditContext();
   const [ranges, setRanges] = useState<Array<[number, number]>>([]);
   const [textContent, setTextContent] = useState<string>("");
 
@@ -227,7 +224,8 @@ export function SuggestionHighlighting({
                 )}
                 onClick={() => {
                   editContext.select([suggestion.itemId]);
-                  editContext.setFocusedField(
+                  const fieldsContext = modifiedFields; // alias to use setter
+                  fieldsContext?.setFocusedField(
                     {
                       item: {
                         id: suggestion.itemId,

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

@@ -8,7 +8,7 @@ import {
 } from "react";
 import { useDebouncedCallback } from "use-debounce";
 import { PageViewContext } from "../page-viewer/pageViewContext";
-import { useEditContext } from "../client/editContext";
+import { useEditContext, useFieldsEditContext } from "../client/editContext";
 import { executePrompt } from "../services/aiService";
 import {
   generatePageContext,
@@ -26,6 +26,7 @@ export function useInlineAiCompletion({
   isUpdatingRef: MutableRefObject<boolean>;
 }) {
   const editContext = useEditContext();
+  const fieldsContext = useFieldsEditContext();
   const [currentCompletion, setCurrentCompletion] = useState<string | null>(
     null,
   );
@@ -61,7 +62,7 @@ export function useInlineAiCompletion({
     try {
       const iframeWindow = pageViewContext.editorIframe?.contentWindow;
       const iframeDocument = iframeWindow?.document;
-      const editableElement = editContext?.inlineEditingFieldElement;
+      const editableElement = fieldsContext?.inlineEditingFieldElement;
 
       if (!iframeWindow || !iframeDocument || !editableElement) return;
 
@@ -396,7 +397,7 @@ ONLY provide the completion text (what comes after the user's text), never repea
   // Debounced AI call: recompute the sentence, call getCompletion, and extract only the "tail" for the ghost text
   const getCompletionDebounced = useDebouncedCallback(
     async (isManualTrigger = false) => {
-      const el = editContext?.inlineEditingFieldElement;
+      const el = fieldsContext?.inlineEditingFieldElement;
       if (!el) return;
 
       // 1) Recompute the exact sentence at this moment
@@ -426,7 +427,7 @@ ONLY provide the completion text (what comes after the user's text), never repea
 
   // Manual completion trigger (non-debounced for immediate response)
   const getCompletionManual = async () => {
-    const el = editContext?.inlineEditingFieldElement;
+    const el = fieldsContext?.inlineEditingFieldElement;
     if (!el) return;
 
     // 1) Recompute the exact sentence at this moment
@@ -556,7 +557,7 @@ ONLY provide the completion text (what comes after the user's text), never repea
   // On every input: either reuse the existing suggestion or fire a new one
   const handleInput = useCallback(
     (e: KeyboardEvent) => {
-      const el = editContext?.inlineEditingFieldElement;
+      const el = fieldsContext?.inlineEditingFieldElement;
       if (!el) return;
 
       // Clear completion when Escape is pressed
@@ -624,7 +625,7 @@ ONLY provide the completion text (what comes after the user's text), never repea
 
       // Check if cursor is at the end of the text
       const isAtEnd = () => {
-        const el = editContext?.inlineEditingFieldElement;
+        const el = fieldsContext?.inlineEditingFieldElement;
         if (!el) return false;
 
         const iframeWindow = pageViewContext.editorIframe?.contentWindow;
@@ -663,7 +664,7 @@ ONLY provide the completion text (what comes after the user's text), never repea
       }
     },
     [
-      editContext?.inlineEditingFieldElement,
+      fieldsContext?.inlineEditingFieldElement,
       currentCompletion,
       getCompletionDebounced,
       getCompletionManual,
@@ -673,12 +674,12 @@ ONLY provide the completion text (what comes after the user's text), never repea
   // Wire up the input listener
   useEffect(() => {
     if (!editContext?.enableCompletions) return;
-    const el = editContext?.inlineEditingFieldElement;
+    const el = fieldsContext?.inlineEditingFieldElement;
     if (!el) return;
     el.addEventListener("keydown", handleInput);
     return () => el.removeEventListener("keydown", handleInput);
   }, [
-    editContext?.inlineEditingFieldElement,
+    fieldsContext?.inlineEditingFieldElement,
     handleInput,
     editContext?.enableCompletions,
   ]);
@@ -686,7 +687,7 @@ ONLY provide the completion text (what comes after the user's text), never repea
   // Add mouse click handler to update cursor span position
   useEffect(() => {
     if (!editContext?.enableCompletions) return;
-    const el = editContext?.inlineEditingFieldElement;
+    const el = fieldsContext?.inlineEditingFieldElement;
     if (!el) return;
 
     const handleMouseUp = () => {
@@ -703,7 +704,10 @@ ONLY provide the completion text (what comes after the user's text), never repea
 
     el.addEventListener("mouseup", handleMouseUp);
     return () => el.removeEventListener("mouseup", handleMouseUp);
-  }, [editContext?.inlineEditingFieldElement, editContext?.enableCompletions]);
+  }, [
+    fieldsContext?.inlineEditingFieldElement,
+    editContext?.enableCompletions,
+  ]);
 
   // Clean up abort controller on unmount
   useEffect(() => {
@@ -728,7 +732,7 @@ ONLY provide the completion text (what comes after the user's text), never repea
     if (
       !iframeWindow ||
       !iframeDocument ||
-      !editContext?.inlineEditingFieldElement
+      !fieldsContext?.inlineEditingFieldElement
     )
       return;
 
@@ -739,7 +743,7 @@ ONLY provide the completion text (what comes after the user's text), never repea
     const completionToApply = cursorSpan.textContent || "";
     if (!completionToApply) return;
 
-    const element = editContext?.inlineEditingFieldElement;
+    const element = fieldsContext?.inlineEditingFieldElement;
 
     // Get the current selection position
     const selection = iframeWindow.getSelection();

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

@@ -3,10 +3,7 @@ import { EditorForm } from "./EditorForm";
 import { PageViewerFrame } from "./PageViewerFrame";
 import { useEffect, useState } from "react";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
-import {
-  useEditContext,
-  useModifiedFieldsContext,
-} from "../client/editContext";
+import { useEditContext, useFieldsEditContext } from "../client/editContext";
 import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
 import { cn } from "../../lib/utils";
 import { Splitter, SplitterPanel } from "../ui/Splitter";
@@ -29,7 +26,7 @@ export function PageViewer({
   noMargins?: boolean;
 }) {
   const editContext = useEditContext();
-  const modifiedFieldsContext = useModifiedFieldsContext();
+  const modifiedFieldsContext = useFieldsEditContext();
 
   const [followEdits, setFollowEdits] = useState(followEditsDefault);
   const [formEditorCollapsed, setFormEditorCollapsed] = useState(false);
@@ -50,7 +47,7 @@ export function PageViewer({
       modifiedFieldsContext?.recentEdits &&
       modifiedFieldsContext.recentEdits.length > 0
     ) {
-      if (editContext?.inlineEditingFieldElement) return;
+      if (modifiedFieldsContext?.inlineEditingFieldElement) return;
 
       const lastEdit =
         modifiedFieldsContext.recentEdits[