@alpaca-editor/core 1.0.3942 → 1.0.3943

package/src/editor/menubar/LanguageSelector.tsx

@@ -0,0 +1,226 @@
+"use client";
+
+import { ArrowDownIcon } from "../ui/Icons";
+import { OverlayPanel } from "primereact/overlaypanel";
+import { useRef, useState } from "react";
+import { InputSwitch } from "primereact/inputswitch";
+import { useEditContext } from "../client/editContext";
+
+import { Language } from "../pageModel";
+
+export function LanguageSelector({
+  selectedLanguage,
+  darkMode,
+  onLanguageSelected,
+  showAllLanguagesSwitch,
+  showAllLanguages = false,
+  disabled = false,
+}: {
+  selectedLanguage: string | undefined;
+  darkMode?: boolean;
+  onLanguageSelected: (language: Language) => void;
+  showAllLanguagesSwitch?: boolean;
+  showAllLanguages?: boolean;
+  disabled?: boolean;
+}) {
+  const overlaypanel = useRef<OverlayPanel>(null);
+  const [showAllLanguagesInternal, setShowAllLanguagesInternal] =
+    useState(showAllLanguages);
+  const [filterText, setFilterText] = useState("");
+  const editContext = useEditContext();
+
+  const allLanguages = editContext?.itemLanguages || [];
+
+  const currentLanguage = allLanguages.find(
+    (x) => x.languageCode === selectedLanguage,
+  );
+
+  let languages = showAllLanguagesInternal
+    ? allLanguages
+    : allLanguages.filter((x: Language) => x.versions > 0);
+
+  // Apply text filter
+  if (filterText.trim()) {
+    languages = languages.filter((x: Language) =>
+      x.name.toLowerCase().includes(filterText.toLowerCase()),
+    );
+  }
+
+  languages.sort((a, b) => a.name.localeCompare(b.name));
+
+  const selectLanguage = async (language: Language) => {
+    onLanguageSelected(language);
+    overlaypanel.current?.hide();
+    // Reset filter when language is selected
+    setFilterText("");
+    return;
+  };
+
+  const handlePanelShow = () => {
+    // Reset filter when panel opens
+    setFilterText("");
+  };
+
+  const handlePanelHide = () => {
+    // Reset filter when panel closes
+    setFilterText("");
+  };
+
+  // Function to highlight matching characters
+  const highlightMatch = (text: string, filter: string) => {
+    if (!filter.trim()) return text;
+
+    return text
+      .split(new RegExp(`(${filter})`, "i"))
+      .map((part: string, i: number) =>
+        part.toLowerCase() === filter.toLowerCase() && part ? (
+          <u className="font-bold" key={i}>
+            {part}
+          </u>
+        ) : (
+          part && <span key={i}>{part}</span>
+        ),
+      );
+  };
+
+  return (
+    <>
+      <div
+        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" : ""}`}
+        data-testid="language-selector"
+        onClick={(ev) => {
+          if (disabled) return;
+          overlaypanel.current?.toggle(ev, ev.currentTarget);
+        }}
+      >
+        <div className="flex gap-2">
+          {currentLanguage && (
+            <>
+              <img src={currentLanguage.icon} className="h-5" />{" "}
+              {currentLanguage.name}
+            </>
+          )}
+          {!currentLanguage && <div>Select language</div>}
+        </div>
+        <div
+          className={`p-dropdown-trigger ${
+            darkMode ? "text-gray-500" : "text-gray-200"
+          }`}
+          role="button"
+          aria-haspopup="listbox"
+          aria-expanded="false"
+          aria-label="Select a language"
+          data-pc-section="trigger"
+        >
+          <ArrowDownIcon />
+        </div>
+      </div>
+      <OverlayPanel
+        dismissable={true}
+        ref={overlaypanel}
+        closeOnEscape
+        onShow={handlePanelShow}
+        onHide={handlePanelHide}
+      >
+        <div className="flex max-h-[50vh] min-w-64 flex-col">
+          {showAllLanguagesSwitch && (
+            <div className="flex items-center justify-center gap-2 p-2 text-xs">
+              <span
+                className="cursor-pointer"
+                onClick={() => setShowAllLanguagesInternal(false)}
+              >
+                Item languages
+              </span>
+              <InputSwitch
+                checked={showAllLanguagesInternal}
+                onChange={(e) => setShowAllLanguagesInternal(e.value)}
+              />
+              <span
+                className="cursor-pointer"
+                onClick={() => setShowAllLanguagesInternal(true)}
+              >
+                All languages
+              </span>
+            </div>
+          )}
+
+          {/* Language filter input */}
+          <div className="border-b px-2 pt-2 pb-1">
+            <div className="relative flex items-center">
+              <input
+                type="text"
+                placeholder="Filter..."
+                value={filterText}
+                onChange={(e) => setFilterText(e.target.value)}
+                className="w-full rounded border border-gray-300 px-2 py-1 pr-6 text-xs focus:border-blue-400 focus:ring-1 focus:ring-blue-400 focus:outline-none"
+                autoFocus
+              />
+              {!filterText && (
+                <i className="pi pi-search absolute right-2 text-xs text-gray-400" />
+              )}
+              {filterText && (
+                <i
+                  className="pi pi-times absolute right-2 cursor-pointer text-xs text-gray-400 hover:text-gray-600"
+                  onClick={() => setFilterText("")}
+                />
+              )}
+            </div>
+          </div>
+
+          <div className="flex-1 overflow-y-auto">
+            <div className="flex flex-col text-sm">
+              {languages.map((x) => (
+                <div
+                  key={x.languageCode}
+                  className="flex cursor-pointer items-center p-2 hover:bg-gray-200"
+                  onClick={() => selectLanguage(x)}
+                >
+                  <img src={x.icon} className="mr-2 h-5" />
+                  {highlightMatch(x.name, filterText)} ({x.versions})
+                </div>
+              ))}
+            </div>
+            {languages.length === 0 && filterText.trim() && (
+              <div className="p-2 text-xs text-gray-500">
+                No languages found matching "{filterText}"
+              </div>
+            )}
+            {languages.length === 0 && !filterText.trim() && (
+              <div className="p-2 text-gray-500">
+                This item has no languages
+              </div>
+            )}
+          </div>
+        </div>
+        {/* {!readOnly && (
+          <div className="border-t p-2 flex flex-col">
+            <div className="text-xs text-gray-500 mb-2 flex items-center gap-1">
+              <ArrowDownIcon /> Actions
+            </div>
+            <div className="flex gap-2">
+              <Button
+                size="small"
+                icon="pi pi-globe"
+                label="Localize"
+                onClick={(event) => {
+                  if (!editContext?.contentEditorItem) return;
+                  editContext?.executeCommand({
+                    command: editContext.configuration.commands.localizeItem,
+                    data: {
+                      items: [editContext.contentEditorItem],
+                    },
+                    event,
+                  });
+                }}
+              ></Button>
+            </div>
+          </div>
+        )} */}
+      </OverlayPanel>
+    </>
+  );
+}

package/src/editor/menubar/Menu.tsx

@@ -0,0 +1,83 @@
+import { Menubar } from "primereact/menubar";
+import { EditContextType, useEditContext } from "../client/editContext";
+import { ItemLanguageVersion } from "./ItemLanguageVersion";
+import { getConfiguration } from "../../config/config";
+import { MenuItemCommandEvent } from "primereact/menuitem";
+
+import { Command } from "../commands/commands";
+import { PageViewerControls } from "./PageViewerControls";
+import { MenuItem } from "../../config/types";
+import { ApproveAndPublishButton } from "./ApproveAndPublish";
+
+export function Menu() {
+  const editContext = useEditContext();
+  if (!editContext) return;
+
+  const configuration = getConfiguration();
+  if (!configuration.editor.mainNavigation) return null;
+  const getSubItems = (
+    items:
+      | (MenuItem | Command<any>)[]
+      | ((editContext: EditContextType) => (MenuItem | Command<any>)[]),
+  ) => {
+    if (typeof items === "function") items = items(editContext);
+    return items.map((y) => {
+      if ("execute" in y)
+        return {
+          id: y.id,
+          label: y.label,
+          icon: y.icon,
+          disabled: editContext.isCommandDisabled({ command: y }),
+          command: async (event: MenuItemCommandEvent) => {
+            await editContext.executeCommand({
+              command: y,
+              event: event.originalEvent,
+            });
+          },
+        };
+      return {
+        id: y.id,
+        label: y.label,
+        icon: y.icon,
+      };
+    });
+  };
+
+  const menuItems = configuration.editor.mainNavigation.map((x) => {
+    if ("execute" in x)
+      return {
+        id: x.id,
+        label: x.label,
+        icon: x.icon,
+        disabled: editContext.isCommandDisabled({ command: x }),
+        command: async (event: MenuItemCommandEvent) => {
+          await editContext.executeCommand({
+            command: x,
+            event: event.originalEvent,
+          });
+        },
+      };
+    return {
+      id: x.id,
+      label: x.label,
+      icon: x.icon,
+      items: x.items ? getSubItems(x.items) : undefined,
+    };
+  });
+
+  const endContent = (
+    <div className="flex items-center gap-3">
+      <PageViewerControls />
+      <ItemLanguageVersion />
+      <ApproveAndPublishButton />
+    </div>
+  );
+
+  return (
+    <Menubar
+      model={menuItems}
+      end={endContent}
+      className="shadow-bottom-soft z-10 min-h-10 rounded-none border-0 border-b bg-gray-50 p-0 text-sm"
+    ></Menubar>
+  );
+}

package/src/editor/menubar/NavButtons.tsx

@@ -0,0 +1,74 @@
+import { useEditContext } from "../client/editContext";
+import { classNames } from "primereact/utils";
+
+export function NavButtons() {
+  const editContext = useEditContext();
+  if (!editContext) return;
+
+  const item = editContext.contentEditorItem;
+  if (!item) return;
+
+  const history = editContext.browseHistory;
+
+  const currentIndex = history.findIndex(
+    (x) => x.id === item.id && x.language === item.language
+  );
+  return (
+    <>
+      <div
+        key="nav-fwd"
+        className={classNames(
+          currentIndex < history.length - 1
+            ? " text-gray-200"
+            : "text-gray-400",
+          "cursor-pointer hover:bg-gray-500 flex gap-2 p-2 rounded-md "
+        )}
+        onClick={() => {
+          const currentIndex = history.findIndex(
+            (x) => x.id === item.id && x.language === item.language
+          );
+          if (currentIndex < history.length - 1) {
+            const historyItem = history[currentIndex + 1];
+            if (!historyItem) return;
+            editContext.loadItem(
+              {
+                id: historyItem.id,
+                language: historyItem.language,
+                version: historyItem.version || 0,
+              },
+              { addToBrowseHistory: false }
+            );
+          }
+        }}
+      >
+        <i className="pi pi-chevron-left text-sm" />
+      </div>
+      <div
+        key="nav-back"
+        className={classNames(
+          currentIndex > 0 ? " text-gray-200" : "text-gray-400",
+          "cursor-pointer hover:bg-gray-500 flex gap-2 p-2 rounded-md "
+        )}
+        onClick={() => {
+          const currentIndex = history.findIndex(
+            (x) => x.id === item.id && x.language === item.language
+          );
+          if (currentIndex > 0) {
+            const historyItem = history[currentIndex - 1];
+            if (!historyItem) return;
+            editContext.loadItem(
+              {
+                id: historyItem.id,
+                language: historyItem.language,
+                version: historyItem.version || 0,
+              },
+              { addToBrowseHistory: false }
+            );
+          }
+        }}
+      >
+        <i className="pi pi-chevron-right text-sm" />
+      </div>
+    </>
+  );
+}

package/src/editor/menubar/PageSelector.tsx

@@ -0,0 +1,278 @@
+import { useEffect, useRef, useState } from "react";
+import { OverlayPanel } from "primereact/overlaypanel";
+import { useEditContext } from "../client/editContext";
+import { BrowseHistory } from "./BrowseHistory";
+import { ArrowDownIcon } from "../ui/Icons";
+import { InputText } from "primereact/inputtext";
+import { ProgressSpinner } from "primereact/progressspinner";
+import { useDebouncedCallback } from "use-debounce";
+
+import { FullItem, ItemDescriptor } from "../pageModel";
+
+import { ResultItem } from "../ui/ItemSearch";
+import { ScrollingContentTree } from "../ScrollingContentTree";
+import { ItemTreeNodeData } from "../services/contentService";
+import { SimpleIconButton } from "../ui/SimpleIconButton";
+import { executeSearch } from "../services/aiService";
+import { ItemList } from "../ui/ItemList";
+
+export function PageSelector({
+  itemDescriptor,
+}: {
+  itemDescriptor: ItemDescriptor;
+}) {
+  const overlaypanel = useRef<OverlayPanel>(null);
+  const editContext = useEditContext();
+  const [item, setItem] = useState<FullItem | undefined>();
+  const [showHistory, setShowHistory] = useState(false);
+  const [hoveredItem, setHoveredItem] = useState<ResultItem | undefined>();
+  const [query, setQuery] = useState("");
+  const [searchResults, setSearchResults] = useState<ResultItem[]>([]);
+  const [historyResults, setHistoryResults] = useState<ResultItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const loadItem = (
+    selectedItem:
+      | ItemTreeNodeData[]
+      | ItemDescriptor
+      | (ItemDescriptor & { path?: string; idPath?: string; icon?: string }),
+  ) => {
+    if (Array.isArray(selectedItem) && selectedItem[0]) {
+      selectedItem = selectedItem[0];
+    }
+    if (!selectedItem) return;
+    const itemDescriptor = selectedItem as ItemDescriptor;
+    editContext?.loadItem({
+      id: itemDescriptor.id,
+      language: itemDescriptor.language,
+      version: itemDescriptor.version || 0,
+    });
+    overlaypanel.current?.hide();
+  };
+
+  const handleSearch = useDebouncedCallback(async (searchPrompt: string) => {
+    if (!editContext || !searchPrompt) {
+      setSearchResults([]);
+      setLoading(false);
+      return;
+    }
+
+    setLoading(true);
+    const currentQuery = searchPrompt;
+
+    // Check if it's a GUID
+    const guidPattern =
+      /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/;
+    if (guidPattern.test(searchPrompt)) {
+      const item = await editContext.itemsRepository.getItem({
+        id: searchPrompt,
+        language: "en",
+        version: 0,
+      });
+      if (item) {
+        if (query === currentQuery) {
+          const resultItem: ResultItem = {
+            id: item.id,
+            name: item.name,
+            language: item.language || "en",
+            icon: item.icon,
+            path: item.path || item.name,
+            idPath: item.idPath,
+          };
+          setSearchResults([resultItem]);
+        }
+      } else {
+        if (query === currentQuery) {
+          setSearchResults([]);
+        }
+      }
+      setLoading(false);
+      return;
+    }
+
+    // Regular search
+    const result = await executeSearch({
+      index: "master",
+      query: searchPrompt,
+      editContext,
+      maxResults: 5,
+    });
+
+    if (query === currentQuery) {
+      if (result.type == "success") {
+        setSearchResults(result.data as ResultItem[]);
+      } else {
+        editContext.showToast({
+          severity: "error",
+          summary: "Error searching",
+          detail: result.response.statusText,
+        });
+        setSearchResults([]);
+      }
+    }
+    setLoading(false);
+  }, 600);
+
+  // Filter history results based on query
+  const filterHistory = useDebouncedCallback(
+    (filterQuery: string, allHistory: ResultItem[]) => {
+      if (!filterQuery) {
+        setHistoryResults([]);
+        return;
+      }
+      const filtered = allHistory.filter(
+        (item) =>
+          item.name.toLowerCase().includes(filterQuery.toLowerCase()) ||
+          item.path.toLowerCase().includes(filterQuery.toLowerCase()),
+      );
+      setHistoryResults(filtered.slice(0, 6)); // Limit to 6 results
+    },
+    300,
+  );
+
+  useEffect(() => {
+    if (query) {
+      setLoading(true);
+      if (showHistory) {
+        // In history mode, use actual history data from editContext
+        const allHistoryItems = editContext?.browseHistory || [];
+        filterHistory(query, allHistoryItems);
+        setLoading(false);
+      } else {
+        handleSearch(query);
+      }
+    } else {
+      setSearchResults([]);
+      if (showHistory) {
+        // Show complete history when query is empty in history mode
+        setHistoryResults(editContext?.browseHistory || []);
+      } else {
+        setHistoryResults([]);
+      }
+      setLoading(false);
+    }
+  }, [query, showHistory, editContext?.browseHistory]);
+
+  useEffect(() => {
+    const setName = async () => {
+      if (!itemDescriptor) return;
+      const item = await editContext?.itemsRepository.getItem(itemDescriptor);
+      setItem(item);
+      setHoveredItem(undefined);
+    };
+    setName();
+  }, [itemDescriptor]);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [showHistory]);
+
+  if (!editContext) return null;
+
+  const currentResults = showHistory ? historyResults : searchResults;
+  const hasResults = currentResults.length > 0;
+
+  return (
+    <>
+      <div
+        id="page-selector-button"
+        className="flex cursor-pointer items-center gap-3 rounded-md p-[7px] py-[5px] text-sm text-gray-200 hover:bg-gray-500"
+        onClick={(ev) => overlaypanel.current?.toggle(ev, ev.currentTarget)}
+        data-testid="page-selector-button"
+      >
+        {item?.name || "unknown"}
+        <div
+          className="p-dropdown-trigger"
+          role="button"
+          aria-haspopup="listbox"
+          aria-expanded="false"
+          aria-label="Select a page"
+          data-pc-section="trigger"
+        >
+          <ArrowDownIcon />
+        </div>
+      </div>
+      <OverlayPanel dismissable={true} ref={overlaypanel} closeOnEscape>
+        <div className="flex h-[75vh] max-w-96 min-w-96 flex-col overflow-hidden">
+          {/* Search/Filter bar with view toggle buttons */}
+          <div className="flex gap-2 border-b border-gray-200 p-2">
+            <div className="relative flex-1">
+              <div className="flex items-center">
+                <InputText
+                  className="w-full rounded border border-gray-300 px-2 py-1 pr-6 text-xs focus:border-blue-400 focus:ring-1 focus:ring-blue-400 focus:outline-none"
+                  onChange={(e) => setQuery(e.target.value)}
+                  value={query}
+                  ref={inputRef}
+                  placeholder={
+                    showHistory ? "Filter history..." : "Search content..."
+                  }
+                />
+                {!loading && !query && (
+                  <i className="pi pi-search px-3 text-gray-500" />
+                )}
+                {!loading && query && (
+                  <i
+                    className="pi pi-times cursor-pointer px-3 text-gray-500"
+                    onClick={() => setQuery("")}
+                  />
+                )}
+                {loading && (
+                  <ProgressSpinner
+                    style={{ width: "24px", height: "24px", margin: "0 12px" }}
+                  />
+                )}
+              </div>
+            </div>
+            <div className="flex gap-1">
+              <SimpleIconButton
+                icon="pi pi-sitemap"
+                label="Search Content"
+                selected={!showHistory}
+                onClick={() => setShowHistory(false)}
+                size="small"
+              />
+              <SimpleIconButton
+                icon="pi pi-history"
+                label="Filter History"
+                selected={showHistory}
+                onClick={() => setShowHistory(true)}
+                size="small"
+              />
+            </div>
+          </div>
+
+          {/* Content area */}
+          <div className="flex flex-1 flex-col overflow-hidden">
+            {/* Results area - takes up to 50% when results are present */}
+            {hasResults && (
+              <div className="max-h-[50%] shrink-0 overflow-auto border-b border-gray-200">
+                <div className="p-2">
+                  <ItemList
+                    items={currentResults}
+                    onItemHover={setHoveredItem}
+                    onItemClick={loadItem}
+                    maxItems={20}
+                    className="max-h-full overflow-auto"
+                  />
+                </div>
+              </div>
+            )}
+
+            {/* Tree view - always visible, takes remaining space */}
+            <div className="relative min-h-0 flex-1">
+              <div className="absolute inset-0 overflow-auto">
+                <ScrollingContentTree
+                  selectedItemId={hoveredItem?.id ?? item?.id}
+                  onSelectionChange={loadItem}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </OverlayPanel>
+    </>
+  );
+}