@alpaca-editor/core 1.0.3955 → 1.0.3959

package/src/editor/commands/itemCommands.tsx

@@ -2,6 +2,12 @@ import { Command, CommandContext, CommandData } from "./commands";
 import { FullItem, ItemDescriptor } from "../pageModel";
 
 import { ItemNameDialog, ItemNameDialogProps } from "../ui/ItemNameDialogNew";
+import {
+  exportItems as exportItemsService,
+  importItems as importItemsService,
+  ExportItemsRequest,
+  ImportItemsRequest,
+} from "../services/contentService";
 
 import {
   CopyMoveTargetSelectorDialog,
@@ -349,3 +355,269 @@ export const publishItemCommand: ItemCommand = {
     await context.editContext.switchView("publish");
   },
 };
+
+export const exportItemsCommand: ItemCommand = {
+  id: "exportItem",
+  label: "Export",
+  icon: "pi pi-download",
+  disabled: (context: ItemCommandContext) =>
+    !context.data?.items || context.data.items.length === 0 || false,
+  execute: async (context: ItemCommandContext) => {
+    const items = context.data?.items;
+    if (!items || items.length === 0) return;
+
+    try {
+      // Get export options from user
+      const exportOptions = await new Promise<{
+        versionOption: "latest" | "all";
+      } | null>((resolve) => {
+        context.editContext.confirm({
+          message: (
+            <div>
+              <div>Export {items.length} item(s) to YAML?</div>
+              <div style={{ marginTop: "10px" }}>
+                <label>Language: </label>
+                <select id="export-language" defaultValue="en">
+                  <option value="en">English</option>
+                  <option value="current">Current Language</option>
+                </select>
+              </div>
+              <div style={{ marginTop: "10px" }}>
+                <label>Version: </label>
+                <select id="export-version" defaultValue="latest">
+                  <option value="latest">Latest</option>
+                  <option value="published">Published</option>
+                </select>
+              </div>
+            </div>
+          ),
+          header: "Export Items",
+          icon: "pi pi-download",
+          accept: () => {
+            const language =
+              (document.getElementById("export-language") as HTMLSelectElement)
+                ?.value || "en";
+            const versionOption =
+              (document.getElementById("export-version") as HTMLSelectElement)
+                ?.value || "latest";
+            resolve({ versionOption: versionOption as "latest" | "all" });
+          },
+          reject: () => resolve(null),
+          showCancel: true,
+        });
+      });
+
+      if (!exportOptions) return;
+
+      const request: ExportItemsRequest = {
+        items: items.map((item) => item.descriptor),
+        versionOption: exportOptions.versionOption as "latest" | "all",
+      };
+
+      const response = await exportItemsService(request);
+
+      if (response.type !== "success") {
+        throw new Error(response.details || "Export failed");
+      }
+
+      const result = response.data;
+
+      if (result && result.yaml) {
+        // Copy YAML content to clipboard
+        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,
+          });
+
+          return true;
+        } catch (clipboardError) {
+          // Fallback: Show YAML in a dialog if clipboard access fails
+          context.editContext.confirm({
+            message: (
+              <div>
+                <div>Export successful! Copy the YAML below:</div>
+                <textarea
+                  readOnly
+                  value={result.yaml}
+                  style={{
+                    width: "100%",
+                    height: "300px",
+                    marginTop: "10px",
+                    fontFamily: "monospace",
+                    fontSize: "12px",
+                  }}
+                  onClick={(e) => {
+                    (e.target as HTMLTextAreaElement).select();
+                  }}
+                />
+              </div>
+            ),
+            header: "Export Results",
+            icon: "pi pi-copy",
+            accept: () => {},
+            rejectLabel: "Close",
+            showCancel: false,
+          });
+
+          return true;
+        }
+      }
+    } catch (error) {
+      context.editContext.showToast({
+        severity: "error",
+        summary: "Export Failed",
+        detail:
+          error instanceof Error ? error.message : "Unknown error occurred",
+        life: 5000,
+      });
+    }
+
+    return false;
+  },
+};
+
+export const importItemsCommand: ItemCommand = {
+  id: "importItems",
+  label: "Import",
+  icon: "pi pi-upload",
+  disabled: (context: ItemCommandContext) =>
+    !context.data?.items ||
+    context.data.items.length !== 1 ||
+    !context.data.items[0]?.canLock ||
+    false,
+  execute: async (context: ItemCommandContext) => {
+    const targetItem = context.data?.items[0];
+    if (!targetItem) return;
+
+    try {
+      // Get YAML content from user
+      const yamlContent = await new Promise<string | null>((resolve) => {
+        const dialogContent = (
+          <div>
+            <div>
+              Import items into <em>{targetItem.name}</em>
+            </div>
+            <div style={{ marginTop: "10px" }}>
+              <label htmlFor="yaml-input">YAML Content:</label>
+              <textarea
+                id="yaml-input"
+                rows={15}
+                cols={60}
+                placeholder="Paste your YAML content here..."
+                style={{
+                  width: "100%",
+                  marginTop: "5px",
+                  fontFamily: "monospace",
+                  fontSize: "12px",
+                  resize: "vertical",
+                }}
+              />
+            </div>
+            <div style={{ marginTop: "10px", fontSize: "12px", color: "#666" }}>
+              <button
+                type="button"
+                onClick={async () => {
+                  try {
+                    const clipboardText = await navigator.clipboard.readText();
+                    const textarea = document.getElementById(
+                      "yaml-input",
+                    ) as HTMLTextAreaElement;
+                    if (textarea) {
+                      textarea.value = clipboardText;
+                    }
+                  } catch (error) {
+                    console.warn("Could not read from clipboard:", error);
+                  }
+                }}
+                style={{
+                  padding: "5px 10px",
+                  fontSize: "12px",
+                  cursor: "pointer",
+                }}
+              >
+                📋 Paste from Clipboard
+              </button>
+              <span style={{ marginLeft: "10px" }}>
+                Tip: Use Ctrl+V to paste YAML content directly into the text
+                area
+              </span>
+            </div>
+          </div>
+        );
+
+        context.editContext.confirm({
+          message: dialogContent,
+          header: "Import Items",
+          icon: "pi pi-upload",
+          accept: () => {
+            const textarea = document.getElementById(
+              "yaml-input",
+            ) as HTMLTextAreaElement;
+            const yamlValue = textarea?.value?.trim();
+            resolve(yamlValue || null);
+          },
+          reject: () => resolve(null),
+          showCancel: true,
+        });
+      });
+
+      if (!yamlContent) return;
+
+      const request: ImportItemsRequest = {
+        targetItem: targetItem.descriptor,
+        yaml: yamlContent,
+      };
+
+      const response = await importItemsService(request);
+
+      if (response.type !== "success") {
+        throw new Error(response.details || "Import failed");
+      }
+
+      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,
+        });
+
+        // Refresh by requesting a refresh
+        context.editContext.requestRefresh("immediate");
+
+        return result.createdItems;
+      }
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error ? error.message : "Unknown error occurred";
+
+      context.editContext.showToast({
+        severity: "error",
+        summary: "Import Failed",
+        detail: errorMessage,
+        life: 5000,
+      });
+
+      // Handle specific error cases
+      if (errorMessage.includes("already exist")) {
+        context.editContext.confirm({
+          message: `Some items already exist in the target location. ${errorMessage}`,
+          header: "Import Conflict",
+          icon: "pi pi-exclamation-triangle",
+          accept: () => {},
+          reject: () => {},
+          showCancel: false,
+        });
+      }
+    }
+
+    return false;
+  },
+};

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

@@ -70,7 +70,7 @@ export function MultiLineText({
       key={fieldItem.id + field.id + fieldItem.language + fieldItem.version}
       value={value}
       disabled={readOnly}
-      className="focus-shadow p-2 text-sm"
+      className="focus-shadow bg-gray-5 p-2 text-sm"
       style={{ width: "100%" }}
       rows={12}
       onChange={(e) => {

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

@@ -164,7 +164,7 @@ export function SingleLineText({
         key={fieldItem.id + field.id + fieldItem.language + fieldItem.version}
         value={value || ""}
         disabled={readOnly}
-        className="focus-shadow p-1.5 text-sm"
+        className="focus-shadow bg-gray-5 p-1.5 text-sm"
         style={{ width: "100%" }}
         onChange={handleChange}
         onSelect={handleSelect}

package/src/editor/menubar/ActiveUsers.tsx

@@ -1,17 +1,283 @@
 import { useEditContext } from "../client/editContext";
 import { User } from "./User";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../components/ui/popover";
+import { useEffect, useState } from "react";
+import { getItemVisitors, ItemVisitor } from "../services/editService";
+import { VerticalDotsIcon } from "../ui/Icons";
+import { AboutDialog } from "../client/AboutDialog";
+
+type UserListItem = {
+  type: "active" | "visitor";
+  sessionId?: string;
+  user?: {
+    displayName?: string;
+    name: string;
+    email?: string;
+  };
+  visitedAt?: string;
+  isCurrentUser?: boolean;
+};
 
 export function ActiveUsers() {
   const editContext = useEditContext();
+  const [visitors, setVisitors] = useState<ItemVisitor[]>([]);
+  const [isLoadingVisitors, setIsLoadingVisitors] = useState(false);
+
   const mySession = editContext?.activeSessions.find(
     (x) => x.sessionId === editContext?.sessionId,
   );
 
+  const activeSessions =
+    editContext?.activeSessions.filter(
+      (x) => x.item?.id === mySession?.item?.id,
+    ) || [];
+
+  // Fetch visitors when current item changes
+  useEffect(() => {
+    if (editContext?.currentItemDescriptor) {
+      setIsLoadingVisitors(true);
+      getItemVisitors(editContext.currentItemDescriptor)
+        .then((result) => {
+          if (result.type === "success" && result.data) {
+            setVisitors(result.data);
+          } else {
+            console.warn("Failed to fetch visitors:", result);
+            setVisitors([]);
+          }
+        })
+        .catch((error) => {
+          console.error("Error fetching visitors:", error);
+          setVisitors([]);
+        })
+        .finally(() => {
+          setIsLoadingVisitors(false);
+        });
+    }
+  }, [
+    editContext?.currentItemDescriptor?.id,
+    editContext?.currentItemDescriptor?.language,
+    editContext?.currentItemDescriptor?.version,
+  ]);
+
+  // Convert active sessions to unified format
+  const activeUsers: UserListItem[] = activeSessions.map((session) => ({
+    type: "active",
+    sessionId: session.sessionId,
+    user: session.user,
+    isCurrentUser: session.sessionId === editContext?.sessionId,
+  }));
+
+  // Convert visitors to unified format, excluding those who are currently active
+  const activeUserNames = new Set(
+    activeSessions.map((s) => s.user.name.toLowerCase()),
+  );
+  const recentVisitors: UserListItem[] = visitors
+    .filter((visitor) => !activeUserNames.has(visitor.userName.toLowerCase()))
+    .slice(0, 10) // Limit to 10 recent visitors
+    .map((visitor) => ({
+      type: "visitor",
+      user: {
+        name: visitor.userName,
+        displayName: visitor.userName,
+      },
+      visitedAt: visitor.visitedAt,
+    }));
+
+  const allUsers = [...activeUsers, ...recentVisitors];
+  const visibleUsers = activeSessions.slice(0, 3); // Only show active users in the avatar stack
+  const remainingActiveCount = Math.max(0, activeSessions.length - 3);
+  const totalCount = activeSessions.length + recentVisitors.length;
+
+  const handleAbout = () => {
+    editContext?.openDialog(AboutDialog, {});
+  };
+
+  const handleLogout = () => {
+    window.location.href = "/sitecore/login?action=logout";
+  };
+
   return (
-    <div className="flex flex-wrap items-center justify-end gap-2 border-gray-200">
-      {editContext?.activeSessions
-        .filter((x) => x.item?.id === mySession?.item?.id)
-        .map((s) => <User key={s.sessionId} session={s} />)}
-    </div>
+    <Popover>
+      <PopoverTrigger asChild>
+        <div
+          className="flex cursor-pointer items-center gap-2"
+          title={`${activeSessions.length} active user${activeSessions.length !== 1 ? "s" : ""}, ${recentVisitors.length} recent visitor${recentVisitors.length !== 1 ? "s" : ""}`}
+        >
+          {/* Overlapping user avatars */}
+          <div className="flex items-center -space-x-2">
+            {visibleUsers.map((session, index) => (
+              <div
+                key={session.sessionId}
+                className="relative rounded-full border-2 border-white"
+                style={{ zIndex: visibleUsers.length - index }}
+              >
+                <User session={session} />
+              </div>
+            ))}
+
+            {/* Show count if more than 3 active users or if there are visitors */}
+            {(remainingActiveCount > 0 || recentVisitors.length > 0) && (
+              <div
+                className="relative flex h-7 w-7 items-center justify-center rounded-full border-2 border-white bg-gray-600 text-xs font-medium text-white"
+                style={{ zIndex: 0 }}
+              >
+                +{remainingActiveCount + recentVisitors.length}
+              </div>
+            )}
+          </div>
+
+          <VerticalDotsIcon />
+        </div>
+      </PopoverTrigger>
+
+      <PopoverContent className="w-80 p-2" align="end">
+        {isLoadingVisitors && (
+          <div className="mb-2 text-xs text-gray-500">
+            Loading recent visitors...
+          </div>
+        )}
+
+        <div className="max-h-96 space-y-1 overflow-y-auto">
+          {/* Active Users Section */}
+          {activeSessions.length > 0 && (
+            <>
+              {activeSessions.map((session) => {
+                const userName = session.user.displayName || session.user.name;
+                const idxBackslash = userName.indexOf("\\");
+                const displayName =
+                  idxBackslash >= 0
+                    ? userName.substring(idxBackslash + 1)
+                    : userName;
+
+                return (
+                  <div
+                    key={session.sessionId}
+                    className="flex items-center gap-3 rounded p-2 hover:bg-gray-50"
+                  >
+                    <div className="relative">
+                      <User session={session} />
+                      <div className="absolute -right-0.5 -bottom-0.5 h-3 w-3 rounded-full border-2 border-white bg-green-500"></div>
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <div className="truncate text-sm font-medium text-gray-900">
+                        {displayName}
+                      </div>
+                      <div className="truncate text-xs text-gray-500">
+                        {session.user.email}
+                      </div>
+                    </div>
+                    {session.sessionId === editContext?.sessionId && (
+                      <div className="text-xs font-medium text-blue-600">
+                        You
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </>
+          )}
+
+          {/* Recent Visitors Section */}
+          {recentVisitors.length > 0 && (
+            <>
+              <div className="mt-3 mb-1 px-2 text-xs font-medium text-gray-600">
+                Recent Visitors ({recentVisitors.length})
+              </div>
+              {recentVisitors.map((visitor, index) => {
+                const userName =
+                  visitor.user?.displayName || visitor.user?.name || "";
+                const idxBackslash = userName.indexOf("\\");
+                const displayName =
+                  idxBackslash >= 0
+                    ? userName.substring(idxBackslash + 1)
+                    : userName;
+
+                const visitedAt = visitor.visitedAt
+                  ? new Date(visitor.visitedAt)
+                  : null;
+                const timeAgo = visitedAt ? formatTimeAgo(visitedAt) : "";
+
+                return (
+                  <div
+                    key={`visitor-${index}`}
+                    className="flex items-center gap-3 rounded p-2 opacity-75 hover:bg-gray-50"
+                  >
+                    <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-300 text-xs font-medium text-gray-600">
+                      {displayName.charAt(0).toUpperCase()}
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <div className="truncate text-sm font-medium text-gray-700">
+                        {displayName}
+                      </div>
+                      <div className="truncate text-xs text-gray-500">
+                        {timeAgo}
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </>
+          )}
+
+          {/* Separator before actions */}
+          {(activeSessions.length > 0 || recentVisitors.length > 0) && (
+            <div className="my-2 border-t border-gray-200"></div>
+          )}
+
+          {/* Action Items */}
+          <div className="space-y-1">
+            <div
+              className="flex cursor-pointer items-center gap-3 rounded p-2 hover:bg-gray-50"
+              onClick={handleAbout}
+            >
+              <div className="flex h-8 w-8 items-center justify-center">
+                <i
+                  className="pi pi-info-circle text-gray-600"
+                  style={{ fontSize: "1rem" }}
+                />
+              </div>
+              <div className="min-w-0 flex-1">
+                <div className="text-sm font-medium text-gray-900">About</div>
+              </div>
+            </div>
+            <div
+              className="flex cursor-pointer items-center gap-3 rounded p-2 hover:bg-gray-50"
+              onClick={handleLogout}
+            >
+              <div className="flex h-8 w-8 items-center justify-center">
+                <i
+                  className="pi pi-sign-out text-gray-600"
+                  style={{ fontSize: "1rem" }}
+                />
+              </div>
+              <div className="min-w-0 flex-1">
+                <div className="text-sm font-medium text-gray-900">Log Out</div>
+              </div>
+            </div>
+          </div>
+
+          {allUsers.length === 0 && !isLoadingVisitors && (
+            <div className="p-2 text-sm text-gray-500">No users found</div>
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
   );
 }
+
+function formatTimeAgo(date: Date): string {
+  const now = new Date();
+  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
+
+  if (diffInSeconds < 60) return "Just now";
+  if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`;
+  if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h ago`;
+  if (diffInSeconds < 604800)
+    return `${Math.floor(diffInSeconds / 86400)}d ago`;
+
+  return date.toLocaleDateString();
+}

package/src/editor/menubar/ItemActionsMenu.tsx

@@ -0,0 +1,89 @@
+import { useEditContext } from "../client/editContext";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../../components/ui/dropdown-menu";
+import { MenuItemGroup } from "../../config/types";
+import { VerticalDotsIcon } from "../ui/Icons";
+
+export function ItemActionsMenu({ isMobile }: { isMobile: boolean }) {
+  const editContext = useEditContext();
+  if (!editContext) return null;
+
+  const itemGroups: MenuItemGroup[] =
+    editContext.configuration.editor.itemActionsMenu?.itemsFactory(
+      editContext,
+    ) || [];
+
+  if (isMobile) {
+    return (
+      <div className="text-sm text-gray-200">
+        {itemGroups.map((group, groupIndex) => (
+          <div
+            key={`group-${group.id || groupIndex}`}
+            className="mb-3 flex flex-row flex-wrap items-center justify-end gap-3"
+          >
+            {group.items
+              .filter((x) => !x.disabled)
+              .map((item) => (
+                <div
+                  key={item.id}
+                  className="flex items-center gap-1"
+                  onClick={() => {
+                    item.command?.({});
+                  }}
+                >
+                  {typeof item.icon === "string" ? (
+                    <i className={item.icon} style={{ fontSize: "1rem" }} />
+                  ) : (
+                    <>{item.icon}</>
+                  )}
+                  {item.label}
+                </div>
+              ))}
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild className="cursor-pointer">
+        <div className="p-1">
+          <VerticalDotsIcon />
+        </div>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-64" align="start">
+        {itemGroups.map((group, groupIndex) => (
+          <div key={`group-${group.id || groupIndex}`}>
+            {group.items
+              .filter((x) => !x.disabled)
+              .map((item) => (
+                <DropdownMenuItem
+                  key={item.id}
+                  onClick={() => {
+                    item.command?.({});
+                  }}
+                  className="flex items-center gap-2"
+                >
+                  {typeof item.icon === "string" ? (
+                    <i className={item.icon} style={{ fontSize: "1rem" }} />
+                  ) : (
+                    <>{item.icon}</>
+                  )}
+                  {item.label}
+                </DropdownMenuItem>
+              ))}
+            {groupIndex > 0 && groupIndex < itemGroups.length - 1 && (
+              <DropdownMenuSeparator />
+            )}
+          </div>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}