@alpaca-editor/core 1.0.3993 → 1.0.3995

package/src/editor/ai/AiTerminal.tsx

@@ -78,6 +78,7 @@ export function AiTerminal({
   const [profiles, setProfiles] = useState<AiProfile[]>([]);
   const [activeProfile, setActiveProfile] = useState<AiProfile>();
   const [initialPromptExecuted, setInitialPromptExecuted] = useState(false);
+  const [agentId] = useState<string>(() => crypto.randomUUID());
   const selection = editContext.selection;
   const terminalRef = useRef<{ submit: () => void }>(null);
   const [responseMessages, setResponseMessages] = useState<Message[]>([]);
@@ -229,6 +230,7 @@ export function AiTerminal({
       model,
       selectedText,
       context,
+      agentId,
       (response: any) => {
         setResponse(response);
         handleResponse(response, callback, false);
@@ -455,6 +457,7 @@ async function executePrompt(
   model: string | null,
   selectedText: string | null,
   context: AiContext,
+  agentId: string,
   callback: (response: any) => void,
 ): Promise<Response | null> {
   const response = await fetch(context.endpoint, {
@@ -468,6 +471,7 @@ async function executePrompt(
       selectedText,
       model,
       sessionId: session,
+      agentId,
     }),
     credentials: "include",
     headers: {

package/src/editor/client/EditorClient.tsx

@@ -10,7 +10,7 @@ import React, {
   ReactNode,
 } from "react";
 
-import { Toast, ToastMessage } from "primereact/toast";
+import { toast } from "sonner";
 
 import {
   EditContextProvider,
@@ -113,6 +113,8 @@ import { Spinner } from "../ui/Spinner";
 import { cleanId } from "../utils/id-helper";
 
 import { useDebouncedCallback } from "use-debounce";
+import { useKeyboardNavigation } from "../utils/keyboardNavigation";
+import { Toaster } from "../../components/ui/sonner";
 
 import { Tour } from "../../tour/Tour";
 import { usePageViewContext } from "../page-viewer/pageViewContext";
@@ -344,6 +346,8 @@ export function EditorClient({
     WebSocketMessage[]
   >([]);
 
+  const [favorites, setFavorites] = useState<any[]>([]);
+
   useEffect(() => {
     const queryMode = searchParams.get("mode");
     if (queryMode) setMode(queryMode as EditorMode);
@@ -959,6 +963,19 @@ export function EditorClient({
     setSuggestedEdits(result.data || []);
   }, [contentEditorItem]);
 
+  const loadFavorites = useCallback(async () => {
+    try {
+      const { getAllFavorites } = await import("../services/favouritesService");
+      const result = await getAllFavorites();
+      if (result.data) {
+        setFavorites(result.data);
+      }
+    } catch (error) {
+      console.error("Failed to load favorites:", error);
+      setFavorites([]);
+    }
+  }, []);
+
   const page = pageViewContext.page;
 
   useEffect(() => {
@@ -1043,6 +1060,11 @@ export function EditorClient({
     loadSuggestedEdits();
   }, [currentItemDescriptor]);
 
+  // Load favorites on mount
+  useEffect(() => {
+    loadFavorites();
+  }, [loadFavorites]);
+
   // Automatically focus the first rendered field when a new component is added
   useEffect(() => {
     async function setFocus() {
@@ -1273,107 +1295,6 @@ export function EditorClient({
     [editContextRef, pathname, router, searchParams],
   );
 
-  const handleKeyDownDebounced = useDebouncedCallback(
-    async (event: KeyboardEvent) => {
-      if (!event.key) return;
-
-      if (event.ctrlKey && event.key === "z") {
-        await operations.undo();
-      }
-      if (event.ctrlKey && event.key === "y") {
-        await operations.redo();
-      }
-      if (event.ctrlKey && event.key === "F11") {
-        event.preventDefault();
-        pageViewContext.setFullscreen(false);
-      }
-
-      const command = configuration.commands.allItemCommands.find(
-        (x) => x.keyBinding === event.key,
-      );
-
-      if (command) {
-        event.preventDefault();
-        const contentEditorItem = editContextRef.current?.contentEditorItem;
-        if (!contentEditorItem) return;
-
-        const items =
-          editContextRef.current?.selection?.map((x) => ({
-            id: x,
-            language: contentEditorItem.language,
-            version: 0,
-          })) || [];
-
-        if (!items.length) items.push(contentEditorItem.descriptor);
-
-        if (items.length > 0) {
-          const fullItems =
-            await editContextRef.current?.itemsRepository.getItems(items);
-          executeCommand({
-            command,
-            data: {
-              items: fullItems,
-            },
-          });
-        }
-      }
-    },
-    50,
-  );
-
-  const handleKeyDown = useCallback(
-    async (event: KeyboardEvent) => {
-      if (event.key === "Insert") {
-        event.preventDefault();
-        event.stopPropagation();
-        editContext.setInsertMode((x) => !x);
-      }
-
-      if (event.ctrlKey && event.key === "s") {
-        event.preventDefault();
-        event.stopPropagation();
-        return;
-      }
-
-      const target = event.target as HTMLElement;
-      const isTyping =
-        target instanceof HTMLInputElement ||
-        target instanceof HTMLTextAreaElement ||
-        target.isContentEditable;
-
-      if (
-        (event.ctrlKey && event.key === "z") ||
-        (event.ctrlKey && event.key === "y")
-      ) {
-        if (!isTyping) {
-          event.preventDefault();
-          event.stopPropagation();
-          handleKeyDownDebounced(event);
-        }
-        return;
-      }
-      handleKeyDownDebounced(event);
-    },
-    [
-      configuration.commands.allItemCommands,
-      executeCommand,
-      editContextRef.current,
-    ],
-  );
-
-  if (typeof window !== "undefined")
-    if (typeof window !== "undefined")
-      useEventListenerExt("keydown", handleKeyDown, window, true);
-
-  if (typeof window !== "undefined")
-    useEventListenerExt(
-      "click",
-      () => {
-        contextMenuRef.current?.close({});
-      },
-      window,
-      true,
-    );
   const state = useMemo(
     () => ({
       page,
@@ -1425,8 +1346,6 @@ export function EditorClient({
     if (currentOverlay !== "context-menu") contextMenuRef.current?.close({});
   }, [currentOverlay]);
 
-  const toast = useRef<Toast | null>(null);
-
   useEffect(() => {
     loadItemVersions();
   }, [currentItemDescriptor]);
@@ -1458,24 +1377,14 @@ export function EditorClient({
 
   const showErrorToast = useCallback(
     ({ summary, details }: { summary?: string; details?: string }) => {
-      toast.current?.show({
-        severity: "error",
-        summary: summary || "Error",
-        detail: details || "An error occurred",
-        life: 3000,
-      });
+      toast.error(details || summary || "An error occurred");
     },
     [],
   );
 
   const showInfoToast = useCallback(
     ({ summary, details }: { summary?: string; details?: string }) => {
-      toast.current?.show({
-        severity: "info",
-        summary: summary || "Info",
-        detail: details || "Information",
-        life: 3000,
-      });
+      toast.info(details || summary || "Information");
     },
     [],
   );
@@ -1648,6 +1557,32 @@ export function EditorClient({
 
   const operations = operationsContext.ops;
 
+  const { handleKeyDown } = useKeyboardNavigation({
+    editContextRef,
+    operations,
+    pageViewContext,
+    configuration,
+    contentEditorItem,
+    browseHistory,
+    loadItem,
+    showInfoToast,
+    showErrorToast,
+    executeCommand,
+  });
+
+  if (typeof window !== "undefined")
+    useEventListenerExt("keydown", handleKeyDown, window, true);
+
+  if (typeof window !== "undefined")
+    useEventListenerExt(
+      "click",
+      () => {
+        contextMenuRef.current?.close({});
+      },
+      window,
+      true,
+    );
+
   useEffect(() => {
     if (mode === "suggestions") {
       setShowSuggestedEdits(true);
@@ -1772,8 +1707,8 @@ export function EditorClient({
         router.push(newUrl, { scroll: false });
       },
       selectMedia,
-      showToast: (message: ToastMessage | ToastMessage[]) => {
-        toast.current?.show(message);
+      showToast: (message: string) => {
+        toast(message);
       },
       scrollIntoView,
       setScrollIntoView,
@@ -2153,6 +2088,8 @@ export function EditorClient({
       userInfo: userInfo,
       userPreferences,
       setUserPreferences,
+      favorites,
+      loadFavorites,
     };
   }, [
     operations,
@@ -2238,6 +2175,8 @@ export function EditorClient({
     openDialog,
     pageWizard,
     webSocketMessages,
+    favorites,
+    loadFavorites,
   ]);
 
   const modifiedFieldsContext = useMemo(() => {
@@ -2302,7 +2241,6 @@ export function EditorClient({
               </>
             ) : (
               <>
-                <Toast ref={toast} />
                 <ConfirmationDialog ref={confirmationDialogRef} />
                 <EditContextMenu ref={contextMenuRef} />
                 <MainLayout
@@ -2352,6 +2290,7 @@ export function EditorClient({
               </div>
             )}
             {dialog}
+            <Toaster position="top-center" />
           </EditContextProvider>
         </ModifiedFieldsContextProvider>
       </OperationsContextProvider>

package/src/editor/client/editContext.ts

@@ -7,7 +7,6 @@ import React, {
   useEffect,
   useRef,
 } from "react";
-import { ToastMessage } from "primereact/toast";
 
 import { EditorConfiguration, EditorView } from "../../config/types";
 import {
@@ -171,7 +170,7 @@ export type EditContextType = {
   setShowSuggestedEditsDiff: React.Dispatch<React.SetStateAction<boolean>>;
   setCenterPanelView: (view: ReactNode) => void;
   configuration: EditorConfiguration;
-  showToast: (message: ToastMessage | ToastMessage[]) => void;
+  showToast: (message: string) => void;
   sessionId: string;
   openSplashScreen: () => void;
   getComponentCommands: (component: Component[]) => Promise<ComponentCommand[]>;
@@ -369,6 +368,8 @@ export type EditContextType = {
   clearWebSocketMessages: () => void;
   userInfo: UserInfo;
   setUserPreferences: (preferences: Partial<UserPreferences>) => void;
+  favorites: any[];
+  loadFavorites: () => Promise<void>;
 };
 
 const EditContext = React.createContext<EditContextType | undefined>(undefined);

package/src/editor/commands/itemCommands.tsx

@@ -1,5 +1,6 @@
 import { Command, CommandContext, CommandData } from "./commands";
 import { FullItem, ItemDescriptor } from "../pageModel";
+import { toast } from "sonner";
 
 import { ItemNameDialog, ItemNameDialogProps } from "../ui/ItemNameDialogNew";
 import {
@@ -357,6 +358,7 @@ export const publishItemCommand: ItemCommand = {
   },
 };
 
+
 export const exportItemsCommand: ItemCommand = {
   id: "exportItem",
   label: "Export",
@@ -428,12 +430,9 @@ export const exportItemsCommand: ItemCommand = {
         try {
           await navigator.clipboard.writeText(result.yaml);
 
-          context.editContext.showToast({
-            severity: "success",
-            summary: "Export Complete",
-            detail: `Successfully exported ${result.itemCount} item(s) to clipboard`,
-            life: 3000,
-          });
+          toast.success(
+            `Successfully exported ${result.itemCount} item(s) to clipboard`,
+          );
 
           return true;
         } catch (clipboardError) {
@@ -469,13 +468,9 @@ export const exportItemsCommand: ItemCommand = {
         }
       }
     } catch (error) {
-      context.editContext.showToast({
-        severity: "error",
-        summary: "Export Failed",
-        detail:
-          error instanceof Error ? error.message : "Unknown error occurred",
-        life: 5000,
-      });
+      toast.error(
+        error instanceof Error ? error.message : "Unknown error occurred",
+      );
     }
 
     return false;
@@ -583,12 +578,7 @@ export const importItemsCommand: ItemCommand = {
       const result = response.data;
 
       if (result && result.createdItems) {
-        context.editContext.showToast({
-          severity: "success",
-          summary: "Import Complete",
-          detail: `Successfully imported ${result.itemCount} item(s)`,
-          life: 3000,
-        });
+        toast.success(`Successfully imported ${result.itemCount} item(s)`);
 
         // Refresh by requesting a refresh
         context.editContext.requestRefresh("immediate");
@@ -599,12 +589,7 @@ export const importItemsCommand: ItemCommand = {
       const errorMessage =
         error instanceof Error ? error.message : "Unknown error occurred";
 
-      context.editContext.showToast({
-        severity: "error",
-        summary: "Import Failed",
-        detail: errorMessage,
-        life: 5000,
-      });
+      toast.error(errorMessage);
 
       // Handle specific error cases
       if (errorMessage.includes("already exist")) {

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

@@ -4,6 +4,7 @@ import { ComponentsDropdown } from "./ComponentsDropdown";
 import { TemplateEditor } from "./TemplateEditor";
 import { getSelectedComponents } from "../componentTreeHelper";
 import { useEditContext } from "../client/editContext";
+import { toast } from "sonner";
 import {
   Component,
   loadComponentDetails,
@@ -34,8 +35,8 @@ export function ComponentEditor({
         context.setComponentDesignerComponent(
           await loadComponentDetails(
             component.datasourceItem!.templateId,
-            context!.page!.item.id
-          )
+            context!.page!.item.id,
+          ),
         );
         // if (component.rendering) {
         //   context.setComponentDesignerRendering(
@@ -57,8 +58,8 @@ export function ComponentEditor({
         context.setComponentDesignerComponent(
           await loadComponentDetails(
             context.componentDesignerComponent.templateId,
-            context!.page!.item.id
-          )
+            context!.page!.item.id,
+          ),
         );
       }
     };
@@ -66,7 +67,7 @@ export function ComponentEditor({
   }, [context.refreshCompletedFlag]);
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex h-full flex-col">
       <Toolbar>
         <ComponentsDropdown allComponents={allComponents} />{" "}
         <Button
@@ -78,12 +79,9 @@ export function ComponentEditor({
             const save = async () => {
               await saveComponentDetails(
                 context.componentDesignerComponent!,
-                context.page!.item
+                context.page!.item,
               );
-              context.showToast({
-                content: "Component saved",
-                severity: "success",
-              });
+              toast.success("Component saved");
             };
             save();
           }}

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

@@ -16,9 +16,11 @@ const RichTextEditorComponent = dynamic(
 export function RichTextEditor({
   field,
   readOnly,
+  updateFieldValue,
 }: {
   field: RichTextField;
   readOnly?: boolean;
+  updateFieldValue?: (value: string) => void;
 }) {
   const profilePath = field.customProperties?.profile;
   
@@ -46,5 +48,12 @@ export function RichTextEditor({
     );
   }
 
-  return <RichTextEditorComponent field={field} readOnly={readOnly} profile={profile} />;
+  return (
+    <RichTextEditorComponent 
+      field={field} 
+      readOnly={readOnly} 
+      profile={profile} 
+      updateFieldValue={updateFieldValue}
+    />
+  );
 }

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

@@ -41,15 +41,18 @@ export function RichTextEditorComponent({
   field,
   readOnly,
   profile,
+  updateFieldValue,
 }: {
   field: RichTextField;
   readOnly?: boolean;
   profile: RichTextEditorProfile | null;
+  updateFieldValue?: (value: string) => void;
 }) {
   const editContextRef = useEditContextRef();
   const modifiedFieldsContext = useModifiedFieldsContext(); 
   const [focused, setFocused] = useState(false);
   const [value, setValue] = useState(field.value as string);
+  const editorRef = useRef<HTMLDivElement>(null);
   
   if (!editContextRef.current) return null;
 
@@ -65,24 +68,35 @@ export function RichTextEditorComponent({
   );
 
   useEffect(() => {
-    if (!focused || !document.activeElement?.closest('.slate-editor')) {
-      if (field.isHistoric) setValue(field.value as string);
-      else setValue(modifiedField?.value ?? (field.value as string));
+    // Only update if the editor is not currently being edited by the user
+    const isEditorActive = focused && editorRef.current?.contains(document.activeElement);
+    const newValue = field.isHistoric 
+      ? field.value as string 
+      : modifiedField?.value ?? (field.value as string);
+    
+    if (!isEditorActive && newValue !== value) {
+      setValue(newValue);
     }
-  }, [field.value, modifiedFieldsContext?.modifiedFields]);
+  }, [field.value, modifiedFieldsContext?.modifiedFields, focused]);
 
   const debouncedSetFieldvalue = useThrottledCallback((value) => {
-    editContextRef.current?.operations.editField({
-      field: field.descriptor,
-      value: value,
-      refresh: "none",
-    });
+    if (updateFieldValue) {
+      // Use the updateFieldValue prop when provided (WYSIWYG mode)
+      updateFieldValue(value);
+    } else {
+      // Use direct field editing when updateFieldValue is not provided (Editor mode)
+      editContextRef.current?.operations.editField({
+        field: field.descriptor,
+        value: value,
+        refresh: "none",
+      });
+    }
   }, editContextRef.current?.configuration.debounceFieldEditsInterval);
 
   const handleChange = (newValue: string) => {
     // Skip empty content patterns for both paragraph and no-tag blocks
     if ((newValue === "<p><br></p>" || newValue === "<br>" || newValue === "") && !field.value) return;
-    if (newValue !== value && focused && !readOnly) {
+    if (newValue !== value && !readOnly) {
       setValue(newValue);
       debouncedSetFieldvalue(newValue);
     }
@@ -95,7 +109,7 @@ export function RichTextEditorComponent({
   // console.log(editorProfile);
 
   return (
-    <div>
+    <div ref={editorRef}>
       <ReactSlate        
         value={value}
         onChange={handleChange}

package/src/editor/field-types/richtext/components/EditorDropdown.css

@@ -0,0 +1,81 @@
+.editor-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.editor-dropdown-button {
+  padding: 5px 8px;
+  background: transparent;
+  border: 1px solid #ddd;
+  border-radius: 3px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  min-width: 60px;
+  justify-content: space-between;
+  font-size: 13px;
+}
+
+.editor-dropdown-button-content {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.editor-dropdown-button-icon {
+  margin-right: 8px;
+  flex-shrink: 0;
+}
+
+.editor-dropdown-button-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.editor-dropdown-button-arrow {
+  margin-left: 5px;
+  flex-shrink: 0;
+}
+
+.editor-dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  background: white;
+  border: 1px solid #ddd;
+  border-radius: 3px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+.editor-dropdown-option {
+  padding: 8px 12px;
+  cursor: pointer;
+  background-color: transparent;
+  font-weight: normal;
+  display: flex;
+  align-items: center;
+}
+
+.editor-dropdown-option:hover {
+  background-color: #f5f5f5;
+}
+
+.editor-dropdown-option.active {
+  background-color: #f0f0f0;
+  font-weight: bold;
+}
+
+.editor-dropdown-option-icon {
+  margin-right: 8px;
+  flex-shrink: 0;
+}
+
+.editor-dropdown-option-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}