@alpaca-editor/core 1.0.3815 → 1.0.3817

package/src/editor/menubar/PageSelector.tsx

@@ -49,7 +49,7 @@ export function PageSelector({
     <>
       <div
         id="page-selector-button"
-        className="p-[7px] text-sm cursor-pointer flex items-center gap-3 text-gray-200 hover:bg-gray-500 rounded-md"
+        className="flex cursor-pointer items-center gap-3 rounded-md p-[7px] py-[5px] text-sm text-gray-200 hover:bg-gray-500"
         onClick={(ev) => overlaypanel.current?.toggle(ev, ev.currentTarget)}
         data-testid="page-selector-button"
       >
@@ -66,10 +66,10 @@ export function PageSelector({
         </div>
       </div>
       <OverlayPanel dismissable={true} ref={overlaypanel} closeOnEscape>
-        <div className="h-[75vh] min-w-48 flex flex-col overflow-hidden">
-          <div className="flex-1 flex flex-col gap-1">
-            <div className="p-2 flex flex-col">
-              <div className="text-xs text-gray-500 mb-2 flex items-center gap-1">
+        <div className="flex h-[75vh] min-w-48 flex-col overflow-hidden">
+          <div className="flex flex-1 flex-col gap-1">
+            <div className="flex flex-col p-2">
+              <div className="mb-2 flex items-center gap-1 text-xs text-gray-500">
                 <ArrowDownIcon /> Search
               </div>
               <ItemSearch
@@ -78,8 +78,8 @@ export function PageSelector({
                 itemSelected={(item) => loadItem(item)}
               />
             </div>
-            <div className="flex-1 flex flex-col">
-              <div className="border-t p-2 pb-1 text-xs text-gray-500 flex items-center gap-1">
+            <div className="flex flex-1 flex-col">
+              <div className="flex items-center gap-1 border-t p-2 pb-1 text-xs text-gray-500">
                 <ArrowDownIcon /> Select
               </div>
               <div className="relative flex-1">
@@ -91,8 +91,8 @@ export function PageSelector({
                 </div>
               </div>
             </div>
-            <div className="border-t p-2 flex flex-col">
-              <div className="text-xs text-gray-500 mb-2 flex items-center gap-1">
+            <div className="flex flex-col border-t p-2">
+              <div className="mb-2 flex items-center gap-1 text-xs text-gray-500">
                 <ArrowDownIcon /> Last visited
               </div>
               <BrowseHistory
@@ -101,8 +101,8 @@ export function PageSelector({
               />
             </div>
           </div>
-          <div className="border-t p-2 flex flex-col">
-            <div className="text-xs text-gray-500 mb-2 flex items-center gap-1">
+          <div className="flex flex-col border-t p-2">
+            <div className="mb-2 flex items-center gap-1 text-xs text-gray-500">
               <ArrowDownIcon /> Actions
             </div>
             <div className="flex gap-2">

package/src/editor/menubar/PageViewerControls.tsx

@@ -3,6 +3,7 @@ import { useEditContext } from "../client/editContext";
 import { Separator } from "./Separator";
 import { CompareIcon, FormEditIcon } from "../ui/Icons";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
+import { Route, SquarePen, UserRoundPen, EyeIcon, Pencil } from "lucide-react";
 
 export function PageViewerControls() {
   const editContext = useEditContext();
@@ -17,16 +18,54 @@ export function PageViewerControls() {
   const setDevice = pageViewContext.setDevice;
 
   return (
-    <div className="flex gap-2 items-center">
+    <div className="flex items-center gap-2">
       {hasLayout && (
         <>
-          {" "}
+          {!editContext.user?.isLimitedPreviewUser && (
+            <SimpleIconButton
+              icon={<Pencil className="h-6 w-6 p-1" />}
+              label="Edit"
+              size="large"
+              className={classNames(
+                editContext.mode === "edit"
+                  ? "bg-gray-200"
+                  : "hover:bg-gray-200 hover:text-gray-800",
+              )}
+              onClick={() => editContext.setMode("edit")}
+            />
+          )}
+
+          <SimpleIconButton
+            icon={<EyeIcon className="h-6 w-6 p-1" />}
+            label="Preview"
+            size="large"
+            className={classNames(
+              editContext.mode === "preview"
+                ? "bg-gray-200"
+                : "hover:bg-gray-200 hover:text-gray-800",
+            )}
+            onClick={() => editContext.setMode("preview")}
+          />
+
+          <SimpleIconButton
+            selected={editContext?.mode === "suggestions"}
+            icon={<UserRoundPen size={24} className="p-0.5" />}
+            label="Suggestions"
+            size="large"
+            className={classNames(
+              editContext?.mode === "suggestions"
+                ? "text-gray-600"
+                : "hover:text-gray-600",
+            )}
+            onClick={() => editContext?.setMode("suggestions")}
+          />
+          <Separator size="large" />
           <i
             className={classNames(
               device === "desktop"
                 ? "bg-gray-200"
-                : " hover:bg-gray-200 text-gray-100 hover:text-gray-800",
-              "pi pi-desktop cursor-pointer p-2 rounded-full"
+                : "text-gray-400 hover:bg-gray-200 hover:text-gray-800",
+              "pi pi-desktop cursor-pointer rounded-full p-2",
             )}
             title="Desktop"
             onClick={() => {
@@ -37,8 +76,8 @@ export function PageViewerControls() {
             className={classNames(
               device && device !== "desktop"
                 ? "bg-gray-200"
-                : " hover:bg-gray-200 text-gray-100 hover:text-gray-800",
-              "pi pi-mobile cursor-pointer p-2 rounded-full"
+                : "text-gray-400 hover:bg-gray-200 hover:text-gray-800",
+              "pi pi-mobile cursor-pointer rounded-full p-2",
             )}
             title="Mobile"
             onClick={() => {
@@ -51,8 +90,8 @@ export function PageViewerControls() {
             className={classNames(
               !device
                 ? "bg-gray-200"
-                : " hover:bg-gray-200 text-gray-100 hover:text-gray-800",
-              "w-8 h-8 cursor-pointer p-1 rounded-full"
+                : "text-gray-400 hover:bg-gray-200 hover:text-gray-800",
+              "h-8 w-8 cursor-pointer rounded-full p-1",
             )}
             title="Form"
             onClick={() => {
@@ -63,27 +102,14 @@ export function PageViewerControls() {
           </i>
           <Separator size="large" />
           <i
-            className="pi pi-external-link cursor-pointer hover:bg-gray-200 p-2 rounded-full text-gray-100 hover:text-gray-800"
+            className="pi pi-external-link cursor-pointer rounded-full p-2 text-gray-400 hover:bg-gray-200 hover:text-gray-800"
             title="Fullscreen"
             onClick={() => pageViewContext.setFullscreen(true)}
           />
-          {!editContext.user?.isLimitedPreviewUser && (
-            <i
-              className={classNames(
-                editContext.previewMode
-                  ? "bg-gray-200"
-                  : " hover:bg-gray-200 text-gray-100 hover:text-gray-800",
-                "pi pi-eye cursor-pointer p-2 rounded-full"
-              )}
-              title="Preview"
-              onClick={() => editContext.setPreviewMode((x) => !x)}
-            />
-          )}
-          <Separator size="large" />
         </>
       )}
       <SimpleIconButton
-        icon={<CompareIcon className="w-6 h-6 p-1" />}
+        icon={<CompareIcon className="h-6 w-6 p-1" />}
         label="Compare"
         size="large"
         className={

package/src/editor/menubar/Separator.tsx

@@ -4,8 +4,8 @@ export function Separator({ size }: { size?: "large" | "small" }) {
   return (
     <div
       className={classNames(
-        "border-r border-gray-300",
-        size === "large" ? "h-7 mx-2" : "h-4 mx-1"
+        "border-r border-gray-400",
+        size === "large" ? "mx-3 h-7" : "mx-1 h-4",
       )}
     ></div>
   );

package/src/editor/menubar/VersionSelector.tsx

@@ -40,7 +40,7 @@ export function VersionSelector({
     <>
       <div
         data-testid="version-selector"
-        className={`flex cursor-pointer items-center gap-3 p-[7px] text-sm ${
+        className={`flex cursor-pointer items-center gap-3 p-[7px] py-[5px] text-sm ${
           darkMode
             ? "text-gray-500 hover:bg-gray-200"
             : "text-gray-200 hover:bg-gray-500"

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

@@ -1,19 +1,20 @@
 import { useEffect, useRef, useState } from "react";
 
-import { EditButton, useEditContext } from "../client/editContext";
+import { EditButton, useEditContext, EditorMode } from "../client/editContext";
 import { Rect, findComponentRect } from "../utils";
 import { useThrottledCallback } from "use-debounce";
 import { Component } from "../pageModel";
 import { PageViewContext } from "../page-viewer/pageViewContext";
 import { ArrowUpFromDot } from "lucide-react";
 import { cn } from "../../lib/utils";
+import { CompareIcon } from "../ui/Icons";
 export function FrameMenu({
   component,
-  mode,
+  compareView,
   pageViewContext,
 }: {
   component: Component;
-  mode: "edit" | "compare" | "view";
+  compareView: boolean;
   pageViewContext: PageViewContext;
 }) {
   const editContext = useEditContext();
@@ -24,7 +25,6 @@ export function FrameMenu({
   const [componentRect, setComponentRect] = useState<Rect>();
   const [isHeaderWiderThanComponent, setIsHeaderWiderThanComponent] =
     useState(false);
-  const [isHovered, setIsHovered] = useState(false);
 
   const updatePosition = () => {
     if (!component || !editContext || !pageViewContext) return;
@@ -138,7 +138,7 @@ export function FrameMenu({
   const commands = editContext.getComponentCommands([component]);
   const isDraggable =
     component.canBeMoved &&
-    mode === "edit" &&
+    editContext.mode === "edit" &&
     !component.layoutId &&
     pageViewContext.page?.item.canWriteItem;
   false;
@@ -193,18 +193,18 @@ export function FrameMenu({
   }
 
   const isShared = component.isShared;
-  const isReadonly = mode === "compare" || mode === "view";
+  const isReadonly = editContext.mode === "preview" || compareView;
   const isLayout = component.layoutId;
 
-  const color = isReadonly
-    ? "readonly"
-    : isShared
-      ? "shared"
-      : isLayout
-        ? "layout"
-        : component.canBeMoved
-          ? "default"
-          : "nonMovable";
+  function getColor() {
+    if (isReadonly) return "readonly";
+    if (editContext?.mode === "suggestions") return "suggestions";
+    if (isShared) return "shared";
+    if (isLayout) return "layout";
+    if (component.canBeMoved) return "default";
+    return "nonMovable";
+  }
+  const color = getColor();
 
   const colorVariants = {
     shared: "border-orange-400",
@@ -212,6 +212,7 @@ export function FrameMenu({
     layout: "border-purple-400",
     default: "border-sky-400",
     nonMovable: "border-red-400",
+    suggestions: "border-teal-400",
   };
 
   const bgColorVariants = {
@@ -220,6 +221,7 @@ export function FrameMenu({
     layout: "bg-purple-400",
     default: "bg-sky-400",
     nonMovable: "bg-red-400",
+    suggestions: "bg-teal-400",
   };
 
   // Calculate initial estimation for the header width
@@ -241,7 +243,6 @@ export function FrameMenu({
           "pointer-events-none absolute inset-0 rounded-b-sm border-2",
           colorVariants[color],
           "tour-frame-menu opacity-50 hover:opacity-100",
-          isHovered && "opacity-100",
           !isMultiSelected && isHeaderWiderThanComponent && "border-t-0",
           !isMultiSelected && !isHeaderWiderThanComponent && "rounded-tl-sm",
           isMultiSelected && "rounded-t-sm",
@@ -296,7 +297,7 @@ export function FrameMenu({
                 </span>
               )}
             </div>
-            {mode === "edit" && (
+            {editContext.mode === "edit" && (
               <div className="flex items-center gap-2 text-sm">
                 {buttons.map((b, i) => (
                   <div

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

@@ -1,14 +1,14 @@
 import { useEffect, useState } from "react";
 import { findComponent } from "../componentTreeHelper";
-import { useEditContext } from "../client/editContext";
+import { useEditContext, EditorMode } from "../client/editContext";
 import { PageViewContext } from "../page-viewer/pageViewContext";
 import { FrameMenu } from "./FrameMenu";
 import { Component } from "../pageModel";
 export function FrameMenus({
-  mode,
+  compareView,
   pageViewContext,
 }: {
-  mode: "edit" | "compare" | "view";
+  compareView: boolean;
   pageViewContext: PageViewContext;
 }) {
   const editContext = useEditContext();
@@ -24,8 +24,8 @@ export function FrameMenus({
           .map((id) =>
             findComponent(
               id,
-              pageViewContext.page?.rootComponent.placeholders || []
-            )
+              pageViewContext.page?.rootComponent.placeholders || [],
+            ),
           )
           .filter((c): c is NonNullable<typeof c> => c !== undefined)
       : [];
@@ -39,7 +39,7 @@ export function FrameMenus({
         <FrameMenu
           key={c.id}
           component={c}
-          mode={mode}
+          compareView={compareView}
           pageViewContext={pageViewContext}
         />
       ))}{" "}

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

@@ -2,19 +2,23 @@ import { useEffect, useRef } from "react";
 import {
   useEditContext,
   useModifiedFieldsContext,
+  useEditContextRef,
 } from "../client/editContext";
 import { useThrottledCallback } from "use-debounce";
 import { getFieldDescriptorFromElement, hasFieldLock } from "../utils";
 import { PageViewContext } from "../page-viewer/pageViewContext";
+import { applyPatch, convertChangesToXML, diffWords } from "diff";
+import { createPatch } from "diff";
 
 export function InlineEditor({
   pageViewContext,
-  mode,
+  compareView,
 }: {
   pageViewContext: PageViewContext;
-  mode: "edit" | "view";
+  compareView: boolean;
 }) {
   const context = useEditContext();
+  const contextRef = useEditContextRef();
   const modifiedFieldsContext = useModifiedFieldsContext();
 
   if (!context) return;
@@ -33,7 +37,7 @@ export function InlineEditor({
 
       if (modifiedFieldValue === value) return;
 
-      context.operations.editField({
+      contextRef.current?.operations.editField({
         field: {
           fieldId,
           fieldName: fieldName ?? undefined,
@@ -51,7 +55,7 @@ export function InlineEditor({
   );
 
   useEffect(() => {
-    if (!context || mode === "view") return;
+    if (!context || compareView || context.mode === "preview") return;
     const element = context.inlineEditingFieldElement;
 
     const editableElements =
@@ -111,37 +115,244 @@ export function InlineEditor({
     };
   }, [context?.inlineEditingFieldElement]);
 
+  function saveCaretPosition(editableElement: HTMLElement): Range | null {
+    const selection =
+      pageViewContext.editorIframeRef.current?.contentWindow?.getSelection();
+    if (
+      selection &&
+      selection.rangeCount > 0 &&
+      editableElement.contains(selection.anchorNode)
+    ) {
+      return selection.getRangeAt(0);
+    }
+    return null;
+  }
+
+  function restoreCaretPosition(range: Range | null) {
+    if (range) {
+      const selection =
+        pageViewContext.editorIframeRef.current?.contentWindow?.getSelection();
+      selection?.removeAllRanges();
+      selection?.addRange(range);
+    }
+  }
+
   useEffect(() => {
-    const updateFields = async () => {
-      modifiedFieldsContext?.modifiedFields.forEach((field) => {
-        const elements =
-          pageViewContext.editorIframeRef.current!.contentWindow?.document.querySelectorAll(
-            `[data-fieldid="${field.fieldId}"][data-itemid="${field.item.id}"][data-language="${field.item.language}"][data-version="${field.item.version}"`,
+    const updateFieldsWithSuggestions = async () => {
+      const iframeWindow =
+        pageViewContext.editorIframeRef.current?.contentWindow;
+      if (!iframeWindow) return;
+      const doc = iframeWindow.document;
+
+      // Query all field elements by data attributes.
+      const fieldElements = doc.querySelectorAll(
+        "[data-fieldid][data-itemid][data-language][data-version]",
+      );
+
+      fieldElements.forEach(async (element) => {
+        // Do not update if this field is currently focused.
+        if (element === context.inlineEditingFieldElement) return;
+
+        const fieldId = element.getAttribute("data-fieldid");
+        const itemId = element.getAttribute("data-itemid");
+        const language = element.getAttribute("data-language");
+        const versionStr = element.getAttribute("data-version");
+        if (!fieldId || !itemId || !language || !versionStr) return;
+        const version = parseInt(versionStr, 10);
+
+        // Build an item descriptor.
+        const descriptor = { id: itemId, language, version };
+
+        // Fetch the current item from the repository.
+        const loadedItem = await context.itemsRepository.getItem(descriptor);
+        if (!loadedItem) return;
+
+        // Get the baseline from repository.
+        const repositoryField = loadedItem.fields.find(
+          (f: any) => f.id === fieldId,
+        );
+        let originalValue = repositoryField
+          ? repositoryField.rawValue || ""
+          : "";
+
+        // If the field is modified locally, use that value.
+        const modField = modifiedFieldsContext?.modifiedFields.find(
+          (mod: any) =>
+            mod.fieldId === fieldId &&
+            mod.item.id === itemId &&
+            mod.item.language === language &&
+            mod.item.version === version,
+        );
+        if (modField) {
+          originalValue = modField.value || "";
+        }
+
+        // If showSuggestedEdits is false, update with the base value.
+        if (!context.showSuggestedEdits) {
+          element.innerHTML = originalValue;
+          return;
+        }
+
+        // Otherwise, gather all suggestions for this field.
+        const fieldSuggestions = context.suggestedEdits.filter(
+          (s: any) =>
+            s.fieldId === fieldId &&
+            s.itemId === itemId &&
+            s.mainItemLanguage === language &&
+            s.mainItemId === pageViewContext.pageItemDescriptor?.id &&
+            s.mainItemVersion === version,
+        );
+
+        // Sort suggestions in chronological order (oldest first).
+        fieldSuggestions.sort(
+          (a: any, b: any) =>
+            new Date(a.created).getTime() - new Date(b.created).getTime(),
+        );
+
+        // Apply suggestions sequentially to generate the merged value.
+        let mergedValue = originalValue;
+        for (const suggestion of fieldSuggestions) {
+          // Compute a patch from the suggestion's baseline to its intended new value.
+          const patch = createPatch(
+            "field",
+            suggestion.oldValue,
+            suggestion.newValue,
           );
+          const patchedCandidate = applyPatch(mergedValue, patch);
+          if (
+            patchedCandidate !== false &&
+            typeof patchedCandidate === "string"
+          ) {
+            mergedValue = patchedCandidate;
+          }
+          // If a patch fails, we simply skip that suggestion.
+        }
+
+        // If showSuggestedEditsDiff is false, show only the merged text
+        if (!context.showSuggestedEditsDiff) {
+          element.innerHTML = mergedValue;
+          return;
+        }
 
-        elements?.forEach(async (element) => {
-          if (element && element !== context?.inlineEditingFieldElement) {
-            const realField = await context.itemsRepository.getField(field);
-            const fieldType = realField?.type;
-
-            if (
-              fieldType === "rich text" ||
-              fieldType === "single-line text" ||
-              fieldType === "multi-line text"
-            ) {
-              element.innerHTML = field?.value ? (field.value as string) : "";
-            }
+        // Compute a word-based diff between originalValue and mergedValue.
+        const diffParts = diffWords(originalValue, mergedValue);
+
+        // Build HTML markup from the diff:
+        let diffHTML = "";
+        diffParts.forEach((part: any) => {
+          let style = "";
+          if (part.added) {
+            style = "color: green;";
+          } else if (part.removed) {
+            style = "color: red; text-decoration: line-through;";
+          } else {
+            style = "color: gray;";
           }
+          // Escape any HTML in part.value if needed.
+          diffHTML += `<span style="${style}">${part.value}</span>`;
         });
+
+        // Update the element's innerHTML with the diff markup.
+        element.innerHTML = diffHTML;
       });
     };
 
-    updateFields();
+    updateFieldsWithSuggestions();
   }, [
     modifiedFieldsContext?.modifiedFields,
     context?.itemsRepository.revision,
     context?.inlineEditingFieldElement,
+    context?.showSuggestedEdits,
+    context?.suggestedEdits,
+    pageViewContext.pageItemDescriptor,
+    context.pageView.page,
+    context.showSuggestedEditsDiff,
   ]);
 
+  useEffect(() => {
+    async function updateFocusedFieldContent() {
+      const element = context?.inlineEditingFieldElement;
+      if (!element) return;
+
+      const savedRange = saveCaretPosition(element);
+      console.log("savedRange", savedRange, element);
+
+      const fieldId = element.getAttribute("data-fieldid");
+      const itemId = element.getAttribute("data-itemid");
+      const language = element.getAttribute("data-language");
+      const versionStr = element.getAttribute("data-version");
+      if (!fieldId || !itemId || !language || !versionStr) return;
+
+      const version = parseInt(versionStr, 10);
+      const descriptor = { id: itemId, language, version };
+
+      // Retrieve the current field value from the repository.
+      const loadedItem = await context.itemsRepository.getItem(descriptor);
+      if (!loadedItem) return;
+      // Get the baseline value from the repository.
+      const repositoryField = loadedItem.fields.find(
+        (f: any) => f.id === fieldId,
+      );
+      let baseValue = repositoryField ? repositoryField.rawValue || "" : "";
+
+      // Override with the modified field value if it exists.
+      const modField = modifiedFieldsContext?.modifiedFields.find(
+        (mod: any) =>
+          mod.fieldId === fieldId &&
+          mod.item.id === itemId &&
+          mod.item.language === language &&
+          mod.item.version === version,
+      );
+      if (modField) {
+        baseValue = modField.value || "";
+      }
+
+      // If suggestions mode is active, merge all suggestions for this field.
+
+      if (context.showSuggestedEdits || context.mode === "suggestions") {
+        const fieldSuggestions = context.suggestedEdits.filter(
+          (s: any) =>
+            s.fieldId === fieldId &&
+            s.itemId === itemId &&
+            s.mainItemLanguage === language &&
+            s.mainItemVersion === version,
+        );
+        // Sort suggestions in chronological order (oldest first).
+        fieldSuggestions.sort(
+          (a: any, b: any) =>
+            new Date(a.created).getTime() - new Date(b.created).getTime(),
+        );
+
+        let mergedValue = baseValue;
+        for (const suggestion of fieldSuggestions) {
+          const patch = createPatch(
+            "field",
+            suggestion.oldValue,
+            suggestion.newValue,
+          );
+          const patchedCandidate = applyPatch(mergedValue, patch);
+          if (
+            patchedCandidate !== false &&
+            typeof patchedCandidate === "string"
+          ) {
+            mergedValue = patchedCandidate;
+          }
+        }
+        // Update focused field element with the merged plain text value.
+        element.innerHTML = mergedValue;
+      } else {
+        if (element.innerHTML !== baseValue) {
+          // If suggestions mode is off, update with the base value.
+          element.innerHTML = baseValue;
+        }
+      }
+
+      console.log("restoring caret position", savedRange);
+      restoreCaretPosition(savedRange);
+    }
+
+    updateFocusedFieldContent();
+  }, [context?.inlineEditingFieldElement]);
+
   return null;
 }