@alpaca-editor/core 1.0.3815 → 1.0.3817

package/src/editor/client/EditorClient.tsx

@@ -21,6 +21,7 @@ import {
   EditContextType,
   EditedField,
   SelectionRange,
+  EditorMode,
 } from "./editContext";
 
 import { EditorConfiguration, MenuItem } from "../../config/types";
@@ -80,6 +81,7 @@ import {
   ValidationResult,
   WorkboxItem,
   Comment,
+  SuggestedEdit,
 } from "../../types";
 
 import { post } from "../services/serviceHelper";
@@ -112,6 +114,7 @@ import { AiTerminalOptions } from "../ai/AiTerminal";
 import { useReviews } from "../reviews/useReviews";
 import uuid from "react-uuid";
 import { flushSync } from "react-dom";
+import { getSuggestedEdits } from "../services/suggestedEditsService";
 
 export type FieldAction = {
   field: FieldDescriptor;
@@ -237,6 +240,9 @@ export function EditorClient({
   const [itemVersions, setItemVersions] = useState<Version[]>([]);
   const [modifiedFields, setModifiedFields] = useState<ModifiedField[]>([]);
   const [comments, setComments] = useState<Comment[]>([]);
+  const [suggestedEdits, setSuggestedEdits] = useState<SuggestedEdit[]>([]);
+  const [showSuggestedEdits, setShowSuggestedEdits] = useState(false);
+  const [showSuggestedEditsDiff, setShowSuggestedEditsDiff] = useState(false);
   const [showComments, setShowComments] = useState<boolean>(() => {
     const savedShowComments =
       typeof window !== "undefined"
@@ -269,21 +275,20 @@ export function EditorClient({
   const [workboxItems, setWorkboxItems] = useState<WorkboxItem[]>([]);
   const [isTourActive, setIsTourActive] = useState(false);
 
-  const [previewMode, setPreviewMode] = useState(false);
-  const [statusMessage, setStatusMessage] = useState<React.ReactNode>("");
+  const [mode, setMode] = useState<EditorMode>("edit");
 
-  const mode = searchParams.get("mode");
+  const [statusMessage, setStatusMessage] = useState<React.ReactNode>("");
 
   useEffect(() => {
-    if (mode === "preview") {
-      setPreviewMode(true);
-    }
-  }, [mode]);
+    const queryMode = searchParams.get("mode");
+    if (queryMode) setMode(queryMode as EditorMode);
+  }, [searchParams]);
 
   useEffect(() => {
-    if (previewMode) {
+    if (mode === "suggestions") {
+      setViewName("reviews");
     }
-  }, [previewMode]);
+  }, [mode]);
 
   useEffect(() => {
     if (
@@ -431,6 +436,23 @@ export function EditorClient({
         });
       }
 
+      if (message.type === "suggested-edit-updated") {
+        setSuggestedEdits((x) => {
+          const index = x.findIndex(
+            (s) => s.id === message.payload.suggestedEdit.id,
+          );
+          if (index !== -1) x[index] = message.payload.suggestedEdit;
+          else x.push(message.payload.suggestedEdit);
+          return x;
+        });
+      }
+
+      if (message.type === "suggested-edit-deleted") {
+        setSuggestedEdits((x) => {
+          return x.filter((s) => s.id !== message.payload.id);
+        });
+      }
+
       if (message.type === "edit-operation") {
         const op = message.payload as EditOperation;
 
@@ -652,6 +674,22 @@ export function EditorClient({
     });
   }, [currentItemDescriptor]);
 
+  // Assuming currentItemDescriptor, ui, state, handleErrorResult, and setSuggestedEdits
+  // are available in your component context.
+  const loadSuggestedEdits = useCallback(async () => {
+    if (!contentEditorItem) return;
+
+    const result = await getSuggestedEdits(
+      contentEditorItem.descriptor.id,
+      contentEditorItem.descriptor.language,
+      contentEditorItem.descriptor.version,
+    );
+
+    if (handleErrorResult(result, ui, state)) return;
+
+    setSuggestedEdits(result.data || []);
+  }, [contentEditorItem]);
+
   const page = pageViewContext.page;
 
   useEffect(() => {
@@ -730,6 +768,7 @@ export function EditorClient({
   useEffect(() => {
     if (!currentItemDescriptor) return;
     loadComments();
+    loadSuggestedEdits();
   }, [currentItemDescriptor]);
 
   useEffect(() => {
@@ -757,15 +796,11 @@ export function EditorClient({
       current.set("compare", "true");
     }
 
-    if (previewMode) {
-      current.set("mode", "preview");
-    } else {
-      current.delete("mode");
-    }
+    current.set("mode", mode);
 
     const newUrl = `${pathname}?${current.toString()}`;
     router.push(newUrl, { scroll: false });
-  }, [currentItemDescriptor, viewName, compareMode, previewMode]);
+  }, [currentItemDescriptor, viewName, compareMode, mode]);
 
   useEffect(() => {
     async function load() {
@@ -877,11 +912,7 @@ export function EditorClient({
         current.set("compare", "true");
       }
 
-      if (previewMode) {
-        current.set("mode", "preview");
-      } else {
-        current.delete("mode");
-      }
+      current.set("mode", mode);
 
       const newUrl = `${pathname}?${current.toString()}`;
 
@@ -907,7 +938,6 @@ export function EditorClient({
       router,
       viewName,
       compareMode,
-      previewMode,
     ],
   );
 
@@ -1061,6 +1091,9 @@ export function EditorClient({
       user,
       editHistory,
       refreshHistory,
+      suggestedEdits,
+      setSuggestedEdits,
+      mode,
     }),
     [
       page,
@@ -1078,6 +1111,9 @@ export function EditorClient({
       user,
       editHistory,
       refreshHistory,
+      suggestedEdits,
+      setSuggestedEdits,
+      mode,
     ],
   );
 
@@ -1279,8 +1315,17 @@ export function EditorClient({
   };
 
   const operationsContext = getOperationsContext(state, ui);
+
   const operations = operationsContext.ops;
 
+  useEffect(() => {
+    if (mode === "suggestions") {
+      setShowSuggestedEdits(true);
+    } else {
+      setShowSuggestedEdits(false);
+    }
+  }, [mode]);
+
   //const pageItem = page ?  itemsRepository.getItem(page.item) : undefined;
   const isReadOnly = false; //pageItem && (!pageItem.hasLock || !pageItem.canWrite);
 
@@ -1302,11 +1347,9 @@ export function EditorClient({
       openSplashScreen: () => {
         router.push("/alpaca/editor");
       },
-
       item: contentEditorItem || page?.item,
       itemLanguages,
       itemVersions,
-
       sessionId: sessionId,
       readonly: isReadOnly,
       selection,
@@ -1315,12 +1358,10 @@ export function EditorClient({
       },
       selectedForInsertion,
       setSelectedForInsertion,
-
       dragObject,
       workboxItems,
       requestRefresh,
       refreshCompletedFlag,
-
       openCreatePageDialog: () => {
         const current = new URLSearchParams(Array.from(searchParams.entries()));
         current.delete("version");
@@ -1342,8 +1383,6 @@ export function EditorClient({
         requestLock: boolean,
       ) => {
         if (field) {
-          // if (nonComponentItems.find((x) => x.id == field.item.id))
-          //   setSelection([field.item.id]);
           setIgnoreBlur(true);
           setTimeout(() => {
             setIgnoreBlur(false);
@@ -1360,14 +1399,11 @@ export function EditorClient({
         }
         return true;
       },
-
       renderedFields,
       setRenderedFields,
-
       getComponentCommands: (components: Component[]) => {
         return getComponentCommands(components, editContext);
       },
-
       dragStart: (dragObject: DragObject) => {
         setDragObject(dragObject);
       },
@@ -1517,13 +1553,11 @@ export function EditorClient({
           requestRefresh("immediate");
         }
       },
-
       activeFieldActions,
       showContextMenu: (event: any, items: MenuItem[]) => {
         contextMenuRef.current?.show(event, items);
         setCurrentOverlay("context-menu");
       },
-
       showAiPopup: (
         event: MouseEvent<HTMLElement>,
         aiTerminalOptions?: AiTerminalOptions,
@@ -1531,7 +1565,6 @@ export function EditorClient({
         setCurrentOverlay("ai");
         aiPopupRef.current?.show(event, aiTerminalOptions);
       },
-
       showFieldEditorPopup: (fields: Field[], sections: string[], ev: any) => {
         setCurrentOverlay("fields");
         fieldEditorPopupRef.current?.show(fields, sections, ev);
@@ -1540,16 +1573,13 @@ export function EditorClient({
       validating,
       validationResult,
       contentEditorItem,
-
       loadItem,
       editHistory,
       isRefreshing,
       activeSessions,
-
       unlockField: async () => {
         await releaseFieldLocks(sessionId);
       },
-
       isCommandDisabled: <T extends CommandData>({
         command,
         data,
@@ -1585,15 +1615,12 @@ export function EditorClient({
       setCurrentOverlay,
       inlineEditingFieldElement,
       setInlineEditingFieldElement,
-
       lockedField,
       timings,
       setTimings,
       selectedRange,
       setSelectedRange,
-
       confirmationDialogRef,
-
       confirm: (props: ConfirmationProps) => {
         confirmationDialogRef.current?.confirm(props);
       },
@@ -1672,19 +1699,24 @@ export function EditorClient({
         setSelectedComment(newComment);
         setShowComments(true);
       },
-      previewMode,
-      setPreviewMode,
+      mode,
+      setMode,
+
       user,
       reviews,
       statusMessage,
       setStatusMessage,
+      suggestedEdits,
+      showSuggestedEdits,
+      setShowSuggestedEdits,
+      showSuggestedEditsDiff,
+      setShowSuggestedEditsDiff,
     };
   }, [
     operations,
     itemsRepository,
     configuration,
     contentEditorItem,
-
     page?.item,
     itemLanguages,
     itemVersions,
@@ -1716,7 +1748,6 @@ export function EditorClient({
     inlineEditingFieldElement,
     lockedField,
     selectedRange,
-
     pageViewContext,
     browseHistory,
     workboxItems,
@@ -1741,14 +1772,18 @@ export function EditorClient({
     selectedComment,
     setSelectedComment,
     loadComments,
-    previewMode,
-    setPreviewMode,
-    showComments,
-    setShowComments,
+    mode,
+    setMode,
     user,
     reviews,
     statusMessage,
     setStatusMessage,
+    suggestedEdits,
+    setSuggestedEdits,
+    showSuggestedEdits,
+    setShowSuggestedEdits,
+    showSuggestedEditsDiff,
+    setShowSuggestedEditsDiff,
   ]);
 
   const modifiedFieldsContext = useMemo(() => {
@@ -1773,7 +1808,7 @@ export function EditorClient({
               <>
                 <div className="fixed inset-0 flex">
                   <PageViewerFrame
-                    mode={editContext.previewMode ? "view" : "edit"}
+                    compareView={compareMode}
                     pageViewContext={pageViewContext}
                   />
                 </div>
@@ -1795,11 +1830,8 @@ export function EditorClient({
             ) : (
               <>
                 <Toast ref={toast} />
-
                 <ConfirmationDialog ref={confirmationDialogRef} />
-
                 <EditContextMenu ref={contextMenuRef} />
-
                 <MainLayout
                   className={className}
                   view={currentView}

package/src/editor/client/editContext.ts

@@ -28,6 +28,7 @@ import {
   WorkboxItem,
   Review,
   AddComponentOperation,
+  SuggestedEdit,
 } from "../../types";
 
 import { ConfirmationProps } from "../ConfirmationDialog";
@@ -63,6 +64,8 @@ export type SelectionRange = {
   text: string;
 };
 
+export type EditorMode = "edit" | "preview" | "suggestions";
+
 export type EditContextType = {
   operations: {
     moveItems: (
@@ -106,6 +109,7 @@ export type EditContextType = {
     undoing: boolean;
   };
   comments: Comment[];
+  suggestedEdits: SuggestedEdit[];
   loadComments: () => void;
   setComments: React.Dispatch<React.SetStateAction<Comment[]>>;
   selectedComment: Comment | undefined;
@@ -125,6 +129,14 @@ export type EditContextType = {
   switchView: (viewName: string) => void;
   compareMode: boolean;
   setCompareMode: (compareMode: boolean) => void;
+
+  mode: EditorMode;
+  setMode: React.Dispatch<React.SetStateAction<EditorMode>>;
+
+  showSuggestedEdits: boolean;
+  setShowSuggestedEdits: React.Dispatch<React.SetStateAction<boolean>>;
+  showSuggestedEditsDiff: boolean;
+  setShowSuggestedEditsDiff: React.Dispatch<React.SetStateAction<boolean>>;
   setCenterPanelView: (view: ReactNode) => void;
   configuration: EditorConfiguration;
   showToast: (message: ToastMessage | ToastMessage[]) => void;
@@ -141,9 +153,6 @@ export type EditContextType = {
 
   updateUrl: (params: Record<string, string>) => void;
 
-  previewMode: boolean;
-  setPreviewMode: React.Dispatch<React.SetStateAction<boolean>>;
-
   selection: string[];
   select: (ids: string[]) => void;
   selectedForInsertion: string;

package/src/editor/client/operations.ts

@@ -6,6 +6,7 @@ import {
   EditOperation,
   ExecuteEditOptions,
   RenameItemOperation,
+  SuggestedEdit,
   User,
 } from "../../types";
 import { FieldDescriptor, FullItem, ItemDescriptor, Page } from "../pageModel";
@@ -29,6 +30,9 @@ import { ConfirmationDialogHandle } from "../ConfirmationDialog";
 import { handleErrorResult } from "./helpers";
 import { ItemsRepository } from "./itemsRepository";
 import { useDebouncedCallback } from "use-debounce";
+import { createOrUpdateSuggestedEdit } from "../services/suggestedEditsService";
+import { decode } from "html-entities";
+import { EditorMode } from "./editContext";
 
 export function getOperationsContext(
   state: {
@@ -45,6 +49,9 @@ export function getOperationsContext(
     itemsRepository: ItemsRepository;
     editHistory: EditOperation[];
     refreshHistory: (item: ItemDescriptor) => Promise<void>;
+    suggestedEdits: SuggestedEdit[];
+    setSuggestedEdits: (suggestedEdits: SuggestedEdit[]) => void;
+    mode: EditorMode;
   },
   ui: {
     showErrorToast: (error: { summary?: string; details?: string }) => void;
@@ -279,6 +286,20 @@ export function getOperationsContext(
       rawValue?: string | null;
       refresh?: "none" | "immediate" | "delayed" | "waitForQuietPeriod";
     }): Promise<void> => {
+      if (state.mode === "suggestions") {
+        const op = await getOrMergeSuggestedEditOp(field, rawValue, value, {
+          page: state.page,
+          user: state.user,
+          itemsRepository: state.itemsRepository,
+          suggestedEdits: state.suggestedEdits,
+          setSuggestedEdits: state.setSuggestedEdits,
+        });
+        if (op) {
+          await createOrUpdateSuggestedEdit(op);
+        }
+        return;
+      }
+
       state.itemsRepository.updateFieldValue(
         field,
         state.user ?? { name: "unknown", ai: false },
@@ -286,6 +307,7 @@ export function getOperationsContext(
         value,
         rawValue,
       );
+
       if (refresh === "immediate") {
         return editFieldImmediate({ field, value, rawValue, refresh });
       }
@@ -300,7 +322,14 @@ export function getOperationsContext(
       lastEditField.current = field;
       return executeEditFieldDebounced({ field, value, rawValue, refresh });
     },
-    [state.itemsRepository],
+    [
+      state.itemsRepository,
+      getOrMergeSuggestedEditOp,
+      state.suggestedEdits,
+      state.page,
+      state.user,
+      state.mode,
+    ],
   );
 
   const editFieldImmediate = useCallback(
@@ -315,13 +344,13 @@ export function getOperationsContext(
       rawValue?: string | null;
       refresh?: "none" | "immediate" | "delayed" | "waitForQuietPeriod";
     }): Promise<void> => {
-      state.itemsRepository.updateFieldValue(
-        field,
-        state.user ?? { name: "unknown", ai: false },
-        true,
-        value,
-        rawValue,
-      );
+      // state.itemsRepository.updateFieldValue(
+      //   field,
+      //   state.user ?? { name: "unknown", ai: false },
+      //   true,
+      //   value,
+      //   rawValue,
+      // );
 
       const val = rawValue !== undefined ? rawValue : value;
       if (val === undefined) return;
@@ -338,7 +367,26 @@ export function getOperationsContext(
   );
 
   const executeEditFieldDebounced = useDebouncedCallback(
-    editFieldImmediate,
+    async ({
+      field,
+      value,
+      rawValue,
+      refresh,
+    }: {
+      field: FieldDescriptor;
+      value?: string;
+      rawValue?: string | null;
+      refresh?: "none" | "immediate" | "delayed" | "waitForQuietPeriod";
+    }) => {
+      state.itemsRepository.updateFieldValue(
+        field,
+        state.user ?? { name: "unknown", ai: false },
+        true,
+        value,
+        rawValue,
+      );
+      editFieldImmediate({ field, value, rawValue, refresh });
+    },
     state.configuration.debounceFieldEditsInterval * 2,
     { trailing: true },
   );
@@ -596,6 +644,8 @@ export function getOperationsContext(
       duplicateComponents,
       undoing.current,
       moveItems,
+      state.mode,
+      state.page,
     ],
   );
 
@@ -610,3 +660,90 @@ export function getOperationsContext(
     [executingEditOperations, editOperationExecuted, ops, undoing],
   );
 }
+
+async function getOrMergeSuggestedEditOp(
+  field: FieldDescriptor,
+  rawValue: string | null | undefined,
+  value: string | undefined,
+  state: {
+    page?: {
+      item: { descriptor: { id: string; language: string; version: number } };
+    };
+    user?: { name: string };
+    itemsRepository: { getItem: (descriptor: any) => Promise<any> };
+    // Assume you have access to current suggested edits in context or state:
+    suggestedEdits: SuggestedEdit[];
+    setSuggestedEdits: (suggestedEdits: SuggestedEdit[]) => void;
+  },
+): Promise<SuggestedEdit | undefined> {
+  const item = await state.itemsRepository.getItem(field.item);
+  if (!item) return;
+
+  const fieldItem = item.fields.find(
+    (f: { id: string; rawValue?: string }) => f.id === field.fieldId,
+  );
+  if (!fieldItem) {
+    console.log(
+      "Could not locate field in item for suggested edit:",
+      field.fieldId,
+    );
+    return;
+  }
+
+  const newVal = rawValue !== undefined ? rawValue : value;
+  if (newVal === undefined) return;
+
+  if (!state.page) {
+    console.log("ERROR: No page");
+    return;
+  }
+  const page = state.page;
+
+  // Attempt to find an existing suggested edit by the same user for this field.
+  const existing = state.suggestedEdits.find(
+    (edit) =>
+      edit.mainItemId === page.item.descriptor.id &&
+      edit.mainItemLanguage === page.item.descriptor.language &&
+      edit.mainItemVersion === page.item.descriptor.version &&
+      edit.itemId === item.id &&
+      edit.fieldId === field.fieldId &&
+      edit.author === (state.user?.name || "unknown") &&
+      edit.status === "Pending", // or any status that indicates it's open for further editing.
+  );
+
+  if (existing) {
+    // Update the existing suggestion.
+    existing.newValue = newVal || "";
+    existing.updated = new Date().toISOString();
+    existing.updatedBy = state.user?.name || "unknown";
+    // Optionally, you might update the comments or other fields.
+    state.setSuggestedEdits([...state.suggestedEdits]);
+    return existing;
+  } else {
+    // Create a new suggested edit if none exists.
+    const newValue = newVal || "";
+    const oldValue = fieldItem.rawValue || "";
+    if (decode(newValue) === decode(oldValue)) return;
+
+    const newEdit: SuggestedEdit = {
+      id: uuid(),
+      mainItemId: state.page?.item.descriptor.id,
+      mainItemLanguage: state.page?.item.descriptor.language,
+      mainItemVersion: state.page?.item.descriptor.version,
+      itemId: item.id,
+      fieldId: field.fieldId,
+      oldValue: fieldItem.rawValue || "",
+      newValue: newVal || "",
+      author: state.user?.name || "unknown",
+      created: new Date().toISOString(),
+      status: "Pending",
+      updatedBy: state.user?.name || "unknown",
+      updated: new Date().toISOString(),
+      comments: "",
+      type: "FieldValue",
+    };
+
+    state.setSuggestedEdits([...state.suggestedEdits, newEdit]);
+    return newEdit;
+  }
+}

package/src/editor/component-designer/ComponentDesigner.tsx

@@ -63,7 +63,7 @@ export function ComponentDesigner() {
         <StackedPanels panels={mainPanels} />
       </SplitterPanel>
       <SplitterPanel>
-        <PageViewerFrame mode="view" />
+        <PageViewerFrame compareView={false} />
       </SplitterPanel>
     </Splitter>
   );

package/src/editor/menubar/LanguageSelector.tsx

@@ -31,7 +31,7 @@ export function LanguageSelector({
   const allLanguages = editContext?.itemLanguages || [];
 
   const currentLanguage = allLanguages.find(
-    (x) => x.languageCode === selectedLanguage
+    (x) => x.languageCode === selectedLanguage,
   );
 
   const languages = showAllLanguagesInternal
@@ -49,11 +49,11 @@ export function LanguageSelector({
   return (
     <>
       <div
-        className={`p-[7px] text-sm cursor-pointer flex items-center gap-3 ${
+        className={`flex cursor-pointer items-center gap-3 p-[7px] py-[5px] text-sm ${
           darkMode
             ? "text-gray-500 hover:bg-gray-300"
             : "text-gray-200 hover:bg-gray-500"
-        }  rounded-md ${disabled ? "opacity-50" : ""}`}
+        } rounded-md ${disabled ? "opacity-50" : ""}`}
         onClick={(ev) => {
           if (disabled) return;
           overlaypanel.current?.toggle(ev, ev.currentTarget);
@@ -82,9 +82,9 @@ export function LanguageSelector({
         </div>
       </div>
       <OverlayPanel dismissable={true} ref={overlaypanel} closeOnEscape>
-        <div className="max-h-[50vh] min-w-64 flex flex-col">
+        <div className="flex max-h-[50vh] min-w-64 flex-col">
           {showAllLanguagesSwitch && (
-            <div className="text-xs p-2 flex items-center gap-2 justify-center">
+            <div className="flex items-center justify-center gap-2 p-2 text-xs">
               <span
                 className="cursor-pointer"
                 onClick={() => setShowAllLanguagesInternal(false)}
@@ -108,7 +108,7 @@ export function LanguageSelector({
               {languages.map((x) => (
                 <div
                   key={x.languageCode}
-                  className="cursor-pointer hover:bg-gray-200 flex gap-2 p-2"
+                  className="flex cursor-pointer gap-2 p-2 hover:bg-gray-200"
                   onClick={() => selectLanguage(x)}
                 >
                   <img src={x.icon} className="h-5" /> {x.name} ({x.versions})