@alpaca-editor/core 1.0.3992 → 1.0.3995

package/src/editor/ui/PerfectTree.tsx

@@ -81,6 +81,8 @@ export interface TreeProps<T = any> {
   enableKeyboardSearch?: boolean;
   /** Time in ms before search is cleared (default: 1500) */
   searchClearDelay?: number;
+  /** Whether to disable automatic selection when expanding nodes (even during search) */
+  disableAutoSelectOnExpand?: boolean;
 }
 
 /**
@@ -580,6 +582,7 @@ export const PerfectTree = <T,>({
   scrollToSelected = false,
   enableKeyboardSearch = false,
   searchClearDelay = 1500,
+  disableAutoSelectOnExpand = false,
 }: TreeProps<T>) => {
   const [searchTerm, setSearchTerm] = useState("");
   const [isFocused, setIsFocused] = useState(false);
@@ -590,18 +593,21 @@ export const PerfectTree = <T,>({
     (node: TreeNode<T>) => {
       const isCurrentlyExpanded = expandedKeys.includes(node.key);
 
-      // If the node is being expanded (not collapsed), clear the search filter and select the node
+      // If the node is being expanded (not collapsed) and there's an active search filter
       if (!isCurrentlyExpanded) {
+        // Only select the node for quick navigation if there's an active search filter
+        // and auto-selection is not disabled
+        if (searchTerm && onSelect && !disableAutoSelectOnExpand) {
+          onSelect(node.key, {} as React.MouseEvent);
+        }
+
+        // Clear the search filter
         setSearchTerm("");
         // Clear any pending search timeout
         if (searchTimeoutRef.current) {
           clearTimeout(searchTimeoutRef.current);
           searchTimeoutRef.current = null;
         }
-        // Select the node being expanded for quick navigation
-        if (onSelect) {
-          onSelect(node.key, {} as React.MouseEvent);
-        }
       }
 
       if (onToggleExpand) {
@@ -613,7 +619,14 @@ export const PerfectTree = <T,>({
         onLazyLoad(node);
       }
     },
-    [onToggleExpand, onLazyLoad, expandedKeys, onSelect],
+    [
+      onToggleExpand,
+      onLazyLoad,
+      expandedKeys,
+      onSelect,
+      searchTerm,
+      disableAutoSelectOnExpand,
+    ],
   );
 
   const handleSelect = useCallback(

package/src/editor/ui/Section.tsx

@@ -18,7 +18,7 @@ export function Section({
           open
             ? "border-blue-500 bg-gray-600"
             : "border-gray-400 bg-gray-400 hover:border-gray-300 hover:bg-gray-500",
-          "flex cursor-pointer items-center justify-between border-l-[8px] px-3 py-2 text-xs text-white transition-all duration-200 ease-in-out",
+          "flex cursor-pointer items-center justify-between border-l-[7px] px-3 py-2 text-xs text-white transition-all duration-200 ease-in-out",
         )}
         onClick={() => setOpen(!open)}
       >

package/src/editor/utils/{itemutils.ts → itemutils.tsx}

@@ -1,20 +1,21 @@
 import { getCreateAndSwitchToNewVersionCommand } from "../commands/createVersionCommand";
 import { Language } from "../pageModel";
 import { EditContextType } from "../client/editContext";
+import { TriangleAlert } from "lucide-react";
 
 export const confirmCreateVersion = (
   editContext: EditContextType,
-  language: Language
+  language: Language,
 ) => {
-    editContext.confirm({
-        message:
-          "This page has no version in language " +
-          language.name +
-          " (" +
-          language.languageCode +
-          "). Do you want to create a new version?",
-        header: "Create Language Version?",
-        icon: "pi pi-exclamation-triangle",
+  editContext.confirm({
+    message:
+      "This page has no version in language " +
+      language.name +
+      " (" +
+      language.languageCode +
+      "). Do you want to create a new version?",
+    header: "Create Language Version?",
+      icon: <TriangleAlert strokeWidth={1} className="h-4 w-4" />,
     acceptLabel: "Yes, create version",
     rejectLabel: "No",
     accept: async () => {
@@ -23,7 +24,6 @@ export const confirmCreateVersion = (
           language: language.languageCode,
         }),
       });
-      },
     },
-  );
+  });
 };

package/src/editor/utils/keyboardNavigation.ts

@@ -0,0 +1,234 @@
+import { EditContextType } from "../client/editContext";
+import { EditorConfiguration } from "../../config/types";
+import { ItemDescriptor, FullItem } from "../pageModel";
+import { HistoryEntry } from "../../types";
+import { useDebouncedCallback } from "use-debounce";
+import { useCallback } from "react";
+
+export interface KeyboardNavigationDependencies {
+  editContextRef: React.MutableRefObject<EditContextType | undefined>;
+  operations: any;
+  pageViewContext: any;
+  configuration: EditorConfiguration;
+  contentEditorItem: FullItem | undefined;
+  browseHistory: HistoryEntry[];
+  loadItem: (
+    itemToLoad: ItemDescriptor | string,
+    options?: { addToBrowseHistory?: boolean; skipViewChange?: boolean },
+  ) => Promise<FullItem | undefined>;
+  showInfoToast: (props: { summary?: string; details?: string }) => void;
+  showErrorToast: (props: { summary?: string; details?: string }) => void;
+  executeCommand: (params: {
+    command: any;
+    data?: any;
+    event?: React.SyntheticEvent;
+  }) => Promise<any>;
+}
+
+export function useKeyboardNavigation(deps: KeyboardNavigationDependencies) {
+  const {
+    editContextRef,
+    operations,
+    pageViewContext,
+    configuration,
+    contentEditorItem,
+    browseHistory,
+    loadItem,
+    showInfoToast,
+    executeCommand,
+  } = deps;
+
+  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);
+      }
+
+      // History Navigation (Alt + Arrow keys, Alt + Shift + Arrow keys for favorites only)
+      if (
+        event.altKey &&
+        (event.key === "ArrowLeft" || event.key === "ArrowRight")
+      ) {
+        event.preventDefault();
+        const currentItem = contentEditorItem;
+        if (!currentItem) return;
+
+        let historyToNavigate = browseHistory;
+
+        // If Shift is also pressed, filter history to only include favorites
+        if (event.shiftKey) {
+          if (editContextRef.current?.favorites) {
+            const favoriteIds = new Set(
+              editContextRef.current.favorites.map(
+                (fav: any) => `${fav.itemId}:${fav.language}`,
+              ),
+            );
+
+            historyToNavigate = browseHistory.filter((historyItem) =>
+              favoriteIds.has(`${historyItem.id}:${historyItem.language}`),
+            );
+
+            if (historyToNavigate.length === 0) {
+              showInfoToast({
+                summary: "Navigation",
+                details: "No favorite items found in browse history",
+              });
+              return;
+            }
+          } else {
+            showInfoToast({
+              summary: "Navigation",
+              details: "Favorites not loaded yet",
+            });
+            return;
+          }
+        }
+
+        const currentIndex = historyToNavigate.findIndex(
+          (x) => x.id === currentItem.id && x.language === currentItem.language,
+        );
+
+        if (
+          event.key === "ArrowLeft" &&
+          currentIndex < historyToNavigate.length - 1
+        ) {
+          // Go forward in history
+          const historyItem = historyToNavigate[currentIndex + 1];
+          if (historyItem) {
+            loadItem(
+              {
+                id: historyItem.id,
+                language: historyItem.language,
+                version: historyItem.version || 0,
+              },
+              { addToBrowseHistory: false },
+            );
+          }
+        } else if (event.key === "ArrowRight" && currentIndex > 0) {
+          // Go back in history
+          const historyItem = historyToNavigate[currentIndex - 1];
+          if (historyItem) {
+            loadItem(
+              {
+                id: historyItem.id,
+                language: historyItem.language,
+                version: historyItem.version || 0,
+              },
+              { addToBrowseHistory: false },
+            );
+          }
+        }
+        return;
+      }
+
+      // Quick access to favorites (Ctrl + 1-9)
+      if (event.altKey && /^[1-9]$/.test(event.key)) {
+        event.preventDefault();
+        const index = parseInt(event.key) - 1;
+
+        // Use favorites from editContext
+        if (editContextRef.current?.favorites) {
+          const favorites = editContextRef.current.favorites;
+          if (favorites[index]) {
+            const favorite = favorites[index];
+            loadItem({
+              id: favorite.itemId,
+              language: favorite.language,
+              version: 0,
+            });
+          } else {
+            showInfoToast({
+              summary: "Favorites",
+              details: `No favorite item at position ${event.key}`,
+            });
+          }
+        } else {
+          showInfoToast({
+            summary: "Favorites",
+            details: "Favorites not loaded yet",
+          });
+        }
+        return;
+      }
+
+      // Command execution
+      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();
+        editContextRef.current?.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);
+    },
+    [handleKeyDownDebounced, editContextRef],
+  );
+
+  return { handleKeyDown };
+}

package/src/editor/views/ItemEditor.tsx

@@ -5,6 +5,7 @@ import { ItemInfo } from "../ItemInfo";
 import { useEditContext } from "../client/editContext";
 import { PageViewContext } from "../page-viewer/pageViewContext";
 import { FullItem } from "../pageModel";
+import { LanguageSelector } from "../menubar/LanguageSelector";
 
 export function ItemEditor({
   item,
@@ -43,7 +44,7 @@ export function ItemEditor({
       )}
 
       {editContext.itemVersions.length === 0 && (
-        <div className="flex justify-center p-4">
+        <div className="flex flex-col items-center gap-4 p-4">
           <Button
             onClick={async () => {
               await editContext.operations.createVersion(item.descriptor);
@@ -51,6 +52,26 @@ export function ItemEditor({
           >
             Create First Version ({item.language})
           </Button>
+
+          {/* Show LanguageSelector if other languages are available */}
+          {editContext.itemLanguages.length > 1 && (
+            <div className="flex flex-col items-center gap-2">
+              <div className="text-sm text-gray-600">
+                Or select a different language:
+              </div>
+              <LanguageSelector
+                selectedLanguage={item.language}
+                onLanguageSelected={(language) => {
+                  editContext.loadItem({
+                    id: item.descriptor.id,
+                    language: language.languageCode,
+                    version: 0,
+                  });
+                }}
+                showAllLanguagesSwitch={false}
+              />
+            </div>
+          )}
         </div>
       )}
     </div>

package/src/page-wizard/PageWizard.tsx

@@ -36,8 +36,8 @@ export type SchemaField = {
 export type WizardSchemaComponent = {
   type: string;
   fields: WizardSchemaField[];
-  availableParentPlaceholders?: string[];
-  allowedChildrenComponentTypes: string[];
+  validParentPlaceholders?: string[];
+  allowedChildrenComponentTypes?: string[];
   allowedOnRoot: boolean;
 };
 

package/src/page-wizard/steps/ContentStep.tsx

@@ -472,7 +472,6 @@ export function ContentStep({
             return;
           }
         }
-        console.log("Wiping components 2");
         editContextRef.current?.itemsRepository.clear();
         modifiedFieldsContext?.clear();
         setInternalState((prev: any) => ({
@@ -488,10 +487,9 @@ export function ContentStep({
 
         pageLoadedRef.current = false;
 
-        console.log("Wiping components 3");
         editContextRef.current?.requestRefresh("immediate");
         await waitForPageLoaded();
-        console.log("Wiping components 4");
+        console.log("Page loaded after wipe");
       }
 
       // Parse schema if it's a string
@@ -509,11 +507,11 @@ export function ContentStep({
       const localAbortController = new AbortController();
       setAbortController(localAbortController);
 
-      // Get the existing page model
-      const existingPageModel = await convertToAiPageModel(
-        editContextRef.current?.page!,
-        editContextRef.current!,
-      );
+      // Get the existing page model; TODO make optional
+      const existingPageModel = undefined; // await convertToAiPageModel(
+      //editContextRef.current?.page!,
+      //editContextRef.current!,
+      //);
 
       console.log("Existing page model: ", existingPageModel);
 
@@ -525,7 +523,7 @@ export function ContentStep({
             Generate a descriptive name for each component including the topic.
               Only use component types that are in the page schema.
               Keep existing components with their ids. Leave id field empty for new components.
-            Existing page model: ${JSON.stringify(existingPageModel)}
+            ${existingPageModel && `Existing page model: ${JSON.stringify(existingPageModel)}`}
           Fill empty fields of existing components before you insert new components.
             Component types: ${JSON.stringify(
               filteredSchema,

package/src/page-wizard/steps/schema.ts

@@ -15,7 +15,7 @@ type WizardSchemaComponentAccumulator = {
 
 export function convertPageSchemaToWizardComponents(
   pageSchema: PageSchema,
-  whitelist: string[]
+  whitelist: string[],
 ): WizardSchemaComponent[] {
   const componentMap = new Map<string, WizardSchemaComponentAccumulator>();
 
@@ -31,7 +31,7 @@ export function convertPageSchemaToWizardComponents(
     component: SchemaComponent,
     parentPlaceholder: string,
     isRoot: boolean,
-    parentAccumulator?: WizardSchemaComponentAccumulator
+    parentAccumulator?: WizardSchemaComponentAccumulator,
   ): void {
     const isAllowed = whitelist.includes(component.type);
     let currentAccumulator: WizardSchemaComponentAccumulator | undefined =
@@ -86,13 +86,16 @@ export function convertPageSchemaToWizardComponents(
     const wizardComponent: WizardSchemaComponent = {
       type: acc.type,
       fields: acc.fields,
-      allowedChildrenComponentTypes: Array.from(acc.validChildComponentTypes),
+      allowedChildrenComponentTypes:
+        acc.validChildComponentTypes.size > 0
+          ? Array.from(acc.validChildComponentTypes)
+          : undefined,
       allowedOnRoot: acc.allowedOnRoot,
     };
     // Only include validParentPlaceholders if there is more than one.
     if (acc.validParentPlaceholders.size > 1) {
-      wizardComponent.availableParentPlaceholders = Array.from(
-        acc.validParentPlaceholders
+      wizardComponent.validParentPlaceholders = Array.from(
+        acc.validParentPlaceholders,
       );
     }
     wizardComponents.push(wizardComponent);
@@ -114,7 +117,7 @@ export function convertPageSchemaToWizardComponents(
 export function getPlaceholder(
   schema: PageSchema,
   parentComponentType: string,
-  childComponentType: string
+  childComponentType: string,
 ): string | undefined {
   // Check for the special case where we want to place at the root level.
   if (parentComponentType.toLowerCase() === "root") {
@@ -145,7 +148,7 @@ export function getPlaceholder(
         for (const placeholder of component.placeholders) {
           if (
             placeholder.components.some(
-              (child) => child.type === childComponentType
+              (child) => child.type === childComponentType,
             )
           ) {
             return placeholder.name;

package/src/page-wizard/steps/usePageCreator.ts

@@ -226,6 +226,7 @@ export function usePageCreator(
               typeId,
               component.type,
               componentMap,
+              fieldsMap,
             );
             continue;
           }

package/src/revision.ts

@@ -1,2 +1,2 @@
-export const version = "1.0.3992";
-export const buildDate = "2025-07-10 01:51:42";
+export const version = "1.0.3995";
+export const buildDate = "2025-07-12 10:36:17";

package/src/splash-screen/NewPage.tsx

@@ -24,6 +24,7 @@ import { CardConnector } from "../components/ui/CardConnector";
 import { Logo } from "../editor/ui/Icons";
 import { ActionButton } from "../components/ActionButton";
 import { FilePenLine, Palette } from "lucide-react";
+import { toast } from "sonner";
 
 export function NewPage({ selectedItemId }: { selectedItemId?: string }) {
   const [selectedItem, setSelectedItem] = useState<ItemDescriptor | null>(null);
@@ -126,11 +127,7 @@ export function NewPage({ selectedItemId }: { selectedItemId?: string }) {
       editContext?.switchView("page-editor");
       if (result.data) editContext?.loadItem(result.data);
     } else {
-      editContext!.showToast({
-        severity: "error",
-        summary: "Error",
-        detail: "Failed to create item",
-      });
+      toast.error("Failed to create item");
     }
   };
 
@@ -167,26 +164,33 @@ export function NewPage({ selectedItemId }: { selectedItemId?: string }) {
             Open Existing
           </ActionButton>
         </div>
-      </div> 
-      <div className="flex flex-1 flex-col md:flex-row">        <div className={`tour-pick-location w-full md:w-1/2 ${
-          selectedItem ? 'h-full md:h-full' : ''
-        }`}><Card
+      </div>
+      <div className="flex flex-1 flex-col md:flex-row">
+        {" "}
+        <div
+          className={`tour-pick-location w-full md:w-1/2 ${
+            selectedItem ? "h-full md:h-full" : ""
+          }`}
+        >
+          <Card
             icon={<i className="pi pi-map-marker text-sm"></i>}
             title="Pick Location"
             description="Select where to create your new page"
             noPadding
-            className={selectedItem ? 'h-full' : 'h-auto'}
+            className={selectedItem ? "h-full" : "h-auto"}
           >
-            <div className={`px-4 pb-4 md:px-6 ${
-              selectedItem ? 'h-full' : ''
-            }`}>
-              <div className={`relative ${
-                selectedItem ? 'h-full' : ''
-              }`}>                <div className={`overflow-auto ${
-                  selectedItem 
-                    ? 'absolute inset-0' 
-                    : 'min-h-[300px] md:min-h-[400px]'
-                }`}>
+            <div
+              className={`px-4 pb-4 md:px-6 ${selectedItem ? "h-full" : ""}`}
+            >
+              <div className={`relative ${selectedItem ? "h-full" : ""}`}>
+                {" "}
+                <div
+                  className={`overflow-auto ${
+                    selectedItem
+                      ? "absolute inset-0"
+                      : "min-h-[300px] md:min-h-[400px]"
+                  }`}
+                >
                   <ScrollingContentTree
                     selectedItemId={selectedItem?.id || selectedItemId}
                     onSelectionChange={(selection) => {
@@ -199,13 +203,11 @@ export function NewPage({ selectedItemId }: { selectedItemId?: string }) {
             </div>
           </Card>
         </div>
-
         {/* Card Connector - only visible when location is selected */}
         {selectedItem && <CardConnector />}
-
         {/* Second card - only visible when location is selected */}
         {selectedItem && (
-          <div className="flex w-full flex-col h-auto md:w-1/2">
+          <div className="flex h-auto w-full flex-col md:w-1/2">
             <Card
               icon={<Palette className="h-4 w-4" />}
               title="Choose Template or Wizard"
@@ -228,7 +230,9 @@ export function NewPage({ selectedItemId }: { selectedItemId?: string }) {
                           ? "bg-theme-secondary-light border-theme-secondary"
                           : "bg-white",
                       )}
-                    >                      {
+                    >
+                      {" "}
+                      {
                         <img
                           src={getAbsoluteIconUrl(option.icon)}
                           alt={option.name}

package/dist/editor/ui/CopyToClipboardButton.d.ts

@@ -1,3 +0,0 @@
-export declare function CopyToClipboardButton({ text }: {
-    text: string;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/editor/ui/CopyToClipboardButton.js

@@ -1,16 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Copy } from "lucide-react";
-import { useEditContext } from "../client/editContext";
-export function CopyToClipboardButton({ text }) {
-    const editContext = useEditContext();
-    const handleCopyToClipboard = (text) => {
-        navigator.clipboard.writeText(text);
-        editContext.showToast({
-            summary: "Copied to clipboard",
-            severity: "success",
-        });
-    };
-    return (_jsx("span", { className: "cursor-pointer", onClick: () => handleCopyToClipboard(text), children: _jsx(Copy, { size: 14, strokeWidth: 1 }) }));
-}
-//# sourceMappingURL=CopyToClipboardButton.js.map

package/dist/editor/ui/CopyToClipboardButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CopyToClipboardButton.js","sourceRoot":"","sources":["../../../src/editor/ui/CopyToClipboardButton.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,MAAM,UAAU,qBAAqB,CAAC,EAAE,IAAI,EAAoB;IAC9D,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,MAAM,qBAAqB,GAAG,CAAC,IAAY,EAAE,EAAE;QAC7C,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;QACpC,WAAY,CAAC,SAAS,CAAC;YACrB,OAAO,EAAE,qBAAqB;YAC9B,QAAQ,EAAE,SAAS;SACpB,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACL,eACE,SAAS,EAAC,gBAAgB,EAC1B,OAAO,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,IAAI,CAAC,YAE1C,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,GAAI,GAC7B,CACR,CAAC;AACJ,CAAC"}

package/src/editor/ui/CopyToClipboardButton.tsx

@@ -1,24 +0,0 @@
-"use client";
-
-import { Copy } from "lucide-react";
-import { useEditContext } from "../client/editContext";
-
-export function CopyToClipboardButton({ text }: { text: string }) {
-  const editContext = useEditContext();
-  const handleCopyToClipboard = (text: string) => {
-    navigator.clipboard.writeText(text);
-    editContext!.showToast({
-      summary: "Copied to clipboard",
-      severity: "success",
-    });
-  };
-
-  return (
-    <span
-      className="cursor-pointer"
-      onClick={() => handleCopyToClipboard(text)}
-    >
-      <Copy size={14} strokeWidth={1} />
-    </span>
-  );
-}