@alpaca-editor/core 1.0.3956 → 1.0.3959

package/src/config/config.tsx

@@ -28,15 +28,11 @@ import { Sessions } from "../editor/sidebar/Sessions";
 import { Workbox } from "../editor/sidebar/Workbox";
 import { DictionaryEditor } from "../editor/sidebar/DictionaryEditor";
 import {
-  BugIcon,
   EditIcon,
   GraphQLIcon,
   JsonIcon,
   PageWizardIcon,
   TreeIcon,
-  WizardIcon,
-  WorkboxIcon,
-  UsersIcon,
 } from "../editor/ui/Icons";
 import { Debug } from "../editor/sidebar/Debug";
 import { GraphQL } from "../editor/sidebar/GraphQL";
@@ -65,6 +61,8 @@ import {
   publishItemCommand,
   renameItemCommand,
   duplicateItemCommand,
+  exportItemsCommand,
+  importItemsCommand,
 } from "../editor/commands/itemCommands";
 import { loadInsertOptions } from "../editor/services/editService";
 import { getDefaultTourSteps } from "../tour/default-tour";
@@ -103,20 +101,24 @@ import { ImageFieldEditor } from "../editor/field-types/ImageFieldEditor";
 
 import {
   BookA,
+  ClockIcon,
+  FolderTreeIcon,
   Ghost,
+  InboxIcon,
   Languages,
   Layers,
   MessageCircleMore,
   Settings,
+  SparklesIcon,
+  Users,
+  Bug,
 } from "lucide-react";
 import { GhostWriter } from "../editor/ai/GhostWriter";
-import { SecondaryControls } from "../editor/menubar/SecondaryControls";
 
 import { Command } from "../editor/commands/commands";
-import { PreviewSecondaryControls } from "../editor/menubar/PreviewSecondaryControls";
-import { AboutDialog } from "../editor/client/AboutDialog";
 import { NewPage } from "../splash-screen/NewPage";
 import { OpenPage } from "../splash-screen/OpenPage";
+import { WorkflowButton } from "../editor/menubar/WorkflowButton";
 const defaultRichTextEditorProfile: RichTextEditorProfile = {
   toolbar: {
     groups: [
@@ -160,23 +162,30 @@ const pageEditorRightSidebar = {
       content: <ComponentTree />,
       initialSize: 20,
     },
-    {
-      name: "history",
-      icon: "pi pi-clock",
-      title: "History",
-      content: <EditHistory />,
-      initialSize: 15,
-    },
   ],
 };
 
 const editView = <EditView />;
-const editPrimaryControls = <PageViewerControls />;
-const itemPageEditorSecondaryControls = <SecondaryControls />;
+const editToolbar = <PageViewerControls />;
+
+// Example of a simple toolbar with just primary controls
+const simpleToolbar = (
+  <div className="flex w-full items-center border-b bg-gray-50 px-4 py-2">
+    <PageViewerControls />
+  </div>
+);
+
+// Example of a custom toolbar for specific view
+const debugToolbar = (
+  <div className="flex w-full items-center justify-between border-b bg-gray-100 px-4 py-2">
+    <div className="flex items-center gap-2">
+      <span className="text-sm font-medium text-gray-600">Debug Mode</span>
+    </div>
+  </div>
+);
 
 const pageEditorViewBase = {
-  primaryControls: editPrimaryControls,
-  secondaryControls: itemPageEditorSecondaryControls,
+  toolbar: editToolbar,
   rightSidebar: pageEditorRightSidebar,
   defaultCenterPanelView: editView,
 };
@@ -217,6 +226,8 @@ export const getConfiguration = (): EditorConfiguration => {
         duplicateItemCommand as Command<{ items: FullItem[] }>,
         copyItemsCommand as Command<{ items: FullItem[] }>,
         moveItemsCommand as Command<{ items: FullItem[] }>,
+        exportItemsCommand,
+        importItemsCommand,
       ],
       reviewcommands: [approveReviewCommand, rejectReviewCommand],
     },
@@ -384,6 +395,7 @@ export const getConfiguration = (): EditorConfiguration => {
           expandTreeNode: "bafb88a1-506a-4671-b47b-1947730d25f6",
         },
       },
+      defaultPinnedViews: ["ai", "content-editor"],
       views: [
         {
           name: "splash-screen",
@@ -413,6 +425,7 @@ export const getConfiguration = (): EditorConfiguration => {
           name: "page-editor",
           title: "Edit",
           icon: <EditIcon />,
+          hidden: true,
           ...pageEditorViewBase,
         },
         // {
@@ -434,14 +447,14 @@ export const getConfiguration = (): EditorConfiguration => {
         // },
         {
           name: "ai",
-          title: "AI",
-          icon: <WizardIcon />,
+          title: "Agent",
+          icon: <SparklesIcon strokeWidth={1} />,
           leftSidebar: {
             panels: [
               {
                 name: "ai-terminal",
                 icon: "pi pi-comments",
-                title: "AI",
+                title: "Agent",
                 content: <EditorAiTerminal />,
                 initialSize: 70,
                 noOverflow: true,
@@ -450,9 +463,26 @@ export const getConfiguration = (): EditorConfiguration => {
           },
           ...pageEditorViewBase,
         },
+        {
+          name: "history",
+          title: "History",
+          icon: <ClockIcon strokeWidth={1} />,
+          leftSidebar: {
+            panels: [
+              {
+                name: "history",
+                icon: <ClockIcon strokeWidth={1} />,
+                title: "History",
+                content: <EditHistory />,
+                initialSize: 15,
+              },
+            ],
+          },
+          ...pageEditorViewBase,
+        },
         {
           name: "translate",
-          icon: <Languages />,
+          icon: <Languages strokeWidth={1} />,
           title: "Translate",
           leftSidebar: {
             panels: [
@@ -470,7 +500,7 @@ export const getConfiguration = (): EditorConfiguration => {
         {
           name: "reviews",
           title: "Reviews",
-          icon: <MessageCircleMore />,
+          icon: <MessageCircleMore strokeWidth={1} />,
           leftSidebar: {
             panels: [
               {
@@ -496,7 +526,7 @@ export const getConfiguration = (): EditorConfiguration => {
         {
           name: "publish",
           title: "Publish",
-          icon: <WorkboxIcon />,
+          icon: <InboxIcon strokeWidth={1} />,
 
           leftSidebar: {
             panels: [
@@ -522,7 +552,7 @@ export const getConfiguration = (): EditorConfiguration => {
         {
           name: "content-editor",
           title: "Content Editor",
-          icon: <TreeIcon />,
+          icon: <FolderTreeIcon strokeWidth={1} />,
           defaultCenterPanelView: editView,
           leftSidebar: {
             panels: [
@@ -536,14 +566,13 @@ export const getConfiguration = (): EditorConfiguration => {
             ],
           },
           rightSidebar: pageEditorRightSidebar,
-          primaryControls: editPrimaryControls,
-          secondaryControls: itemPageEditorSecondaryControls,
+          toolbar: editToolbar,
         },
 
         {
           name: "dictionary",
           title: "Dictionary",
-          icon: <BookA />,
+          icon: <BookA strokeWidth={1} />,
           leftSidebar: {
             panels: [
               {
@@ -560,7 +589,7 @@ export const getConfiguration = (): EditorConfiguration => {
         {
           name: "sessions",
           title: "Sessions",
-          icon: <UsersIcon />,
+          icon: <Users strokeWidth={1} />,
           leftSidebar: {
             panels: [
               {
@@ -577,8 +606,8 @@ export const getConfiguration = (): EditorConfiguration => {
         {
           name: "debug",
           title: "Debug",
-          icon: <BugIcon />,
-
+          icon: <Bug strokeWidth={1} />,
+          toolbar: debugToolbar,
           leftSidebar: {
             panels: [
               {
@@ -611,7 +640,8 @@ export const getConfiguration = (): EditorConfiguration => {
               },
             ],
           },
-          ...pageEditorViewBase,
+          rightSidebar: pageEditorRightSidebar,
+          defaultCenterPanelView: editView,
         },
         // {
         //   name: "component-designer",
@@ -677,14 +707,14 @@ export const getConfiguration = (): EditorConfiguration => {
         {
           name: "control-center",
           title: "Control Center",
-          icon: <Settings />,
+          icon: <Settings strokeWidth={1} />,
           defaultCenterPanelView: <Status />,
           menuBar: <></>,
         },
       ],
 
       titlebar: <Titlebar />,
-      actionsMenu: {
+      itemActionsMenu: {
         itemsFactory: (editContext: EditContextType): MenuItemGroup[] => {
           const groups: MenuItemGroup[] = [];
 
@@ -751,36 +781,36 @@ export const getConfiguration = (): EditorConfiguration => {
             ],
           });
 
-          groups.push({
-            id: "about",
-            label: "About",
-            items: [
-              {
-                id: "about",
-                label: "About",
-                icon: "pi pi-info-circle",
-                command: async () => {
-                  editContext.openDialog(AboutDialog, {});
-                },
-              },
-            ],
-          });
-
-          groups.push({
-            id: "account",
-            label: "Account",
-            items: [
-              {
-                id: "logout",
-                label: "Log Out",
-                icon: "pi pi-sign-out",
-                command: async () => {
-                  // Redirect to Sitecore logout endpoint
-                  window.location.href = "/sitecore/login?action=logout";
-                },
-              },
-            ],
-          });
+          // groups.push({
+          //   id: "about",
+          //   label: "About",
+          //   items: [
+          //     {
+          //       id: "about",
+          //       label: "About",
+          //       icon: "pi pi-info-circle",
+          //       command: async () => {
+          //         editContext.openDialog(AboutDialog, {});
+          //       },
+          //     },
+          //   ],
+          // });
+
+          // groups.push({
+          //   id: "account",
+          //   label: "Account",
+          //   items: [
+          //     {
+          //       id: "logout",
+          //       label: "Log Out",
+          //       icon: "pi pi-sign-out",
+          //       command: async () => {
+          //         // Redirect to Sitecore logout endpoint
+          //         window.location.href = "/sitecore/login?action=logout";
+          //       },
+          //     },
+          //   ],
+          // });
 
           return groups;
         },
@@ -888,6 +918,13 @@ export function configureForUser(
   user: User,
 ): EditorConfiguration {
   if (user.isLimitedPreviewUser) {
+    const previewToolbar = (
+      <div className="flex w-full items-center justify-between border-b bg-gray-50 px-4 py-2">
+        <PageViewerControls />
+        <WorkflowButton />
+      </div>
+    );
+
     return {
       ...configuration,
       activeTour: "preview",
@@ -907,7 +944,7 @@ export function configureForUser(
                   ),
                 ],
               },
-              secondaryControls: <PreviewSecondaryControls />,
+              toolbar: previewToolbar,
             };
           }),
       },

package/src/config/types.ts

@@ -79,8 +79,7 @@ export type EditorView = {
   leftSidebar?: Sidebar;
   rightSidebar?: Sidebar;
   hidden?: boolean;
-  primaryControls?: ReactNode;
-  secondaryControls?: ReactNode;
+  toolbar?: ReactNode;
   hideViewSelector?: boolean;
   visible?: (editContext: EditContextType) => boolean;
   beforeClose?: (editContext: EditContextType) => Promise<boolean>;
@@ -161,7 +160,8 @@ export type EditorConfiguration = {
       };
     };
     views: EditorView[];
-    actionsMenu?: {
+    defaultPinnedViews?: string[];
+    itemActionsMenu?: {
       itemsFactory: (editContext: EditContextType) => MenuItemGroup[];
     };
     mainNavigation?: (MenuItem | Command<any>)[];

package/src/editor/ContentTree.tsx

@@ -698,7 +698,7 @@ export default function ContentTree({
   );
   if (!memoizedTreeNodes.length)
     return (
-      <div className="flex h-full items-center justify-center gap-2 bg-gray-50 text-xs text-gray-500">
+      <div className="flex h-full items-center justify-center gap-2 text-xs text-gray-500">
         <Spinner size="2xl" /> Loading...
       </div>
     );

package/src/editor/Editor.tsx

@@ -5,10 +5,10 @@ import { EditorClient } from "./client/EditorClient";
 import { ItemDescriptor } from "./pageModel";
 import { EditorConfiguration } from "../config/types";
 import { useEffect, useState } from "react";
-import { SystemStatus, UserInfo } from "../types";
+import { SystemStatus, UserInfo, UserPreferences } from "../types";
 
 import { getUserInfo } from "./services/editService";
-import { getSystemStatus } from "./services/systemService";
+import { getSystemStatus, saveUserPreferences } from "./services/systemService";
 import uuid from "react-uuid";
 import { getConfiguration } from "../config/config";
 
@@ -85,6 +85,12 @@ export function Editor({
       item={page}
       sessionId={sessionId}
       userInfo={userInfo}
+      userPreferences={userInfo.preferences}
+      setUserPreferences={(preferences: Partial<UserPreferences>) => {
+        const newPreferences = { ...userInfo.preferences, ...preferences };
+        saveUserPreferences(newPreferences);
+        setUserInfo({ ...userInfo, preferences: newPreferences });
+      }}
     ></EditorClient>
   );
 }

package/src/editor/FieldList.tsx

@@ -45,8 +45,8 @@ export function FieldList({
   if (!fields) return;
 
   return (
-    <div>
-      <div className="tour-field-list sticky top-0 z-10 ml-[1px] flex items-center gap-2 border-y border-gray-200 bg-gray-50 p-2">
+    <div className="text-dark">
+      <div className="tour-field-list sticky top-0 z-10 ml-[1px] flex items-center gap-2 border-y border-gray-200 bg-white p-2">
         <i className="pi pi-search" />
         <div className="text-xs">Filter</div>
         <InputText

package/src/editor/FieldListField.tsx

@@ -224,7 +224,7 @@ export default function FieldListField({
 
       <div className="flex-1">
         <div className="flex min-h-7 flex-wrap items-center gap-x-3 gap-y-1">
-          <label className="block text-xs font-bold select-text">
+          <label className="block text-xs font-medium select-text">
             {title || field.displayName || field.name}
           </label>
 

package/src/editor/ImageEditor.tsx

@@ -3,6 +3,13 @@ import { useEditContext } from "./client/editContext";
 import { ImageField } from "./fieldTypes";
 //import { useDialog } from "./client/DialogContext";
 import { ClientFieldButton } from "../config/types";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../components/ui/dropdown-menu";
+import { MagicEditIcon } from "./ui/Icons";
 
 export function ImageEditor({
   field,
@@ -11,7 +18,7 @@ export function ImageEditor({
   field: ImageField;
   style?: React.CSSProperties;
 }) {
-  const [showMenu, setShowMenu] = useState(true);
+  const [showMenu, setShowMenu] = useState(false);
   const editContext = useEditContext();
   //const dialogContext = useDialog();
 
@@ -59,8 +66,6 @@ export function ImageEditor({
     <>
       <div
         className="absolute inset-0 flex items-center justify-center"
-        onMouseEnter={() => setShowMenu(true)}
-        onMouseLeave={() => setShowMenu(false)}
         style={style}
         data-testid="select-media"
       >
@@ -71,33 +76,51 @@ export function ImageEditor({
             className="max-h-full max-w-full object-contain"
           />
         )}
-        {showMenu && (
-          <div className="absolute inset-0 grid grid-cols-1 items-center justify-center gap-1.5 bg-black/50 p-3 text-sm">
-            <Btn
-              label={getImageSrc() ? "Change Image" : "Select Image"}
-              icon="pi pi-image"
-              onClick={() => selectMedia()}
-              testId="select-media-button"
-              className="min-w-[80px]"
-            />
+
+        {/* Dropdown menu with button in bottom right corner */}
+        <DropdownMenu open={showMenu} onOpenChange={setShowMenu}>
+          <DropdownMenuTrigger asChild>
+            <button
+              className="text-dark border-gray-3 hover:bg-gray-5 absolute right-2 bottom-2 flex items-center justify-center gap-2 border bg-white p-2 opacity-70 shadow-lg transition-opacity hover:opacity-85"
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
+              data-testid="menu-toggle-button"
+            >
+              <MagicEditIcon /> Edit
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" side="top" sideOffset={8}>
+            <DropdownMenuItem
+              onClick={() => {
+                selectMedia();
+                setShowMenu(false);
+              }}
+            >
+              <i className="pi pi-image" />
+              {getImageSrc() ? "Change Image" : "Select Image"}
+            </DropdownMenuItem>
+
             {editContext?.configuration?.fieldTypes["image"]?.buttons?.map(
               (button: ClientFieldButton) => (
-                <Btn
+                <DropdownMenuItem
                   key={button.id}
-                  label={button.label}
-                  icon={button.icon}
-                  onClick={() =>
+                  onClick={() => {
                     button?.clientAction?.({
                       field,
                       editContext,
                       //dialogContext,
-                    })
-                  }
-                />
+                    });
+                    setShowMenu(false);
+                  }}
+                >
+                  <i className={button.icon} />
+                  {button.label}
+                </DropdownMenuItem>
               ),
             )}
-          </div>
-        )}
+          </DropdownMenuContent>
+        </DropdownMenu>
       </div>
     </>
   );

package/src/editor/MainLayout.tsx

@@ -4,7 +4,7 @@ import { classNames } from "primereact/utils";
 import { useEditContext } from "./client/editContext";
 import { SidebarView } from "./sidebar/SidebarView";
 import { Splitter, SplitterPanel } from "./ui/Splitter";
-import { ViewSelector } from "./sidebar/ViewSelector";
+import { LeftToolbar } from "./sidebar/LeftToolbar";
 import { Layers } from "lucide-react";
 import { MobileLayout } from "./MobileLayout";
 
@@ -44,6 +44,7 @@ export default function MainLayout(props: MainLayoutProps) {
               sidebar={v.leftSidebar!}
               editContext={editContext}
               active={props.view.name === v.name && !!v.leftSidebar}
+              onClose={() => editContext.switchView("page-editor")}
             />
           ))}
         </div>
@@ -61,7 +62,7 @@ export default function MainLayout(props: MainLayoutProps) {
       name: "rightSidebar",
       defaultSize: 250,
       content: props.rightSidebar,
-      collapsible: true,
+      collapsible: false,
     });
   }
 
@@ -72,21 +73,25 @@ export default function MainLayout(props: MainLayoutProps) {
   }
 
   return (
-    <div className={classNames("flex flex-col select-none", className)}>
-      {editContext?.configuration.editor.titlebar}
+    <div className={classNames("flex select-none", className)}>
       <div className="flex flex-1">
-        {!props.view.hideViewSelector && <ViewSelector />}
-        <div className="flex-1">
-          <Splitter
-            localStorageKey="editor.panelSizes"
-            expandLabel={
-              <div className="flex items-center justify-center">
-                <Layers size={14} />
-                <div className="mt-3">{props.rightSidebarTitle} </div>
-              </div>
-            }
-            panels={panels}
-          />
+        {!props.view.hideViewSelector && <LeftToolbar />}
+        <div className="flex flex-1 flex-col">
+          {editContext?.configuration.editor.titlebar}
+          {editContext?.view?.toolbar}
+          <div className="bg-gray-4 flex-1">
+            <Splitter
+              localStorageKey="editor.panelSizes"
+              splitterClassName="bg-transparent"
+              expandLabel={
+                <div className="flex items-center justify-center">
+                  <Layers size={14} />
+                  <div className="mt-3">{props.rightSidebarTitle} </div>
+                </div>
+              }
+              panels={panels}
+            />
+          </div>
         </div>
       </div>
       {/* sidebars already rendered above; no hidden cache needed */}

package/src/editor/MobileLayout.tsx

@@ -1,6 +1,6 @@
 import { cn } from "../lib/utils";
 import { MainLayoutProps } from "./MainLayout";
-import { ViewSelector } from "./sidebar/ViewSelector";
+import { LeftToolbar } from "./sidebar/LeftToolbar";
 import { useEditContext } from "./client/editContext";
 import { Splitter, SplitterPanel } from "./ui/Splitter";
 import { SidebarView } from "./sidebar/SidebarView";
@@ -41,6 +41,7 @@ export function MobileLayout(props: MainLayoutProps) {
               sidebar={v.leftSidebar!}
               editContext={editContext}
               active={props.view.name === v.name && !!v.leftSidebar}
+              onClose={() => editContext.switchView("page-editor")}
             />
           ))}
         </div>
@@ -58,7 +59,7 @@ export function MobileLayout(props: MainLayoutProps) {
         localStorageKey="mobile-layout-splitter"
       />
 
-      {!props.view.hideViewSelector && <ViewSelector />}
+      {!props.view.hideViewSelector && <LeftToolbar />}
       {/* <div className="text-2xs fixed right-0 bottom-0 z-50 flex flex-col rounded-tl-2xl bg-gray-50/70 px-1 pt-1 text-center font-mono text-gray-400">
         <div title={buildDate}>{version}</div>
       </div> */}