@alpaca-editor/core 1.0.3959 → 1.0.3962

package/dist/styles.css

@@ -232,6 +232,9 @@
   .right-1 {
     right: calc(var(--spacing) * 1);
   }
+  .right-1\.5 {
+    right: calc(var(--spacing) * 1.5);
+  }
   .right-2 {
     right: calc(var(--spacing) * 2);
   }
@@ -385,6 +388,9 @@
   .mt-auto {
     margin-top: auto;
   }
+  .-mr-2 {
+    margin-right: calc(var(--spacing) * -2);
+  }
   .mr-1 {
     margin-right: calc(var(--spacing) * 1);
   }
@@ -421,9 +427,6 @@
   .mb-\[-3px\] {
     margin-bottom: -3px;
   }
-  .-ml-1 {
-    margin-left: calc(var(--spacing) * -1);
-  }
   .ml-0\.5 {
     margin-left: calc(var(--spacing) * 0.5);
   }
@@ -619,6 +622,9 @@
   .max-h-96 {
     max-height: calc(var(--spacing) * 96);
   }
+  .max-h-\[30vh\] {
+    max-height: 30vh;
+  }
   .max-h-\[45vh\] {
     max-height: 45vh;
   }
@@ -826,6 +832,9 @@
   .flex-2 {
     flex: 2;
   }
+  .flex-shrink {
+    flex-shrink: 1;
+  }
   .flex-shrink-0 {
     flex-shrink: 0;
   }
@@ -1169,9 +1178,9 @@
     border-top-left-radius: 0.25rem;
     border-top-right-radius: 0.25rem;
   }
-  .rounded-t-sm {
-    border-top-left-radius: calc(var(--radius) - 4px);
-    border-top-right-radius: calc(var(--radius) - 4px);
+  .rounded-t-xs {
+    border-top-left-radius: var(--radius-xs);
+    border-top-right-radius: var(--radius-xs);
   }
   .rounded-l-full {
     border-top-left-radius: calc(infinity * 1px);
@@ -1180,12 +1189,12 @@
   .rounded-tl-2xl {
     border-top-left-radius: var(--radius-2xl);
   }
-  .rounded-tl-sm {
-    border-top-left-radius: calc(var(--radius) - 4px);
+  .rounded-tl-xs {
+    border-top-left-radius: var(--radius-xs);
   }
-  .rounded-b-sm {
-    border-bottom-right-radius: calc(var(--radius) - 4px);
-    border-bottom-left-radius: calc(var(--radius) - 4px);
+  .rounded-b-xs {
+    border-bottom-right-radius: var(--radius-xs);
+    border-bottom-left-radius: var(--radius-xs);
   }
   .rounded-bl {
     border-bottom-left-radius: 0.25rem;
@@ -1210,10 +1219,6 @@
     border-inline-style: var(--tw-border-style);
     border-inline-width: 1px;
   }
-  .border-y {
-    border-block-style: var(--tw-border-style);
-    border-block-width: 1px;
-  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -1704,9 +1709,6 @@
   .pb-6 {
     padding-bottom: calc(var(--spacing) * 6);
   }
-  .pl-1 {
-    padding-left: calc(var(--spacing) * 1);
-  }
   .pl-1\.5 {
     padding-left: calc(var(--spacing) * 1.5);
   }
@@ -3048,6 +3050,11 @@
       width: 4px;
     }
   }
+  .md\:w-\[8px\] {
+    @media (width >= 48rem) {
+      width: 8px;
+    }
+  }
   .md\:w-auto {
     @media (width >= 48rem) {
       width: auto;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpaca-editor/core",
-  "version": "1.0.3959",
+  "version": "1.0.3962",
   "publishConfig": {
     "access": "public"
   },

package/src/components/FilterInput.tsx

@@ -0,0 +1,102 @@
+import { InputText } from "primereact/inputtext";
+import { ProgressSpinner } from "primereact/progressspinner";
+import { forwardRef } from "react";
+import { cn } from "../lib/utils";
+
+export interface FilterInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+  showSearchIcon?: boolean;
+  showClearIcon?: boolean;
+  disabled?: boolean;
+  autoFocus?: boolean;
+  loading?: boolean;
+  spinnerStyle?: React.CSSProperties;
+  onClear?: () => void;
+}
+
+export const FilterInput = forwardRef<HTMLInputElement, FilterInputProps>(
+  (
+    {
+      value,
+      onChange,
+      placeholder = "Filter...",
+      className,
+      showSearchIcon = true,
+      showClearIcon = true,
+      disabled = false,
+      autoFocus = false,
+      loading = false,
+      spinnerStyle,
+      onClear,
+    },
+    ref,
+  ) => {
+    const handleClear = () => {
+      onChange("");
+      if (onClear) {
+        onClear();
+      }
+    };
+
+    return (
+      <div className={cn("relative flex items-center", className)}>
+        <InputText
+          ref={ref}
+          type="text"
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          className="border-gray-3 w-full rounded border px-2 py-1 pr-6 text-xs focus:ring-1 focus:outline-none"
+          placeholder={placeholder}
+          disabled={disabled}
+          autoFocus={autoFocus}
+        />
+        {loading && (
+          <ProgressSpinner
+            className="absolute right-1.5"
+            style={{
+              width: "18px",
+              height: "18px",
+              ...spinnerStyle,
+            }}
+          />
+        )}
+        {!loading && !value && showSearchIcon && (
+          <i className="pi pi-search absolute right-2 text-xs text-gray-400" />
+        )}
+        {!loading && value && showClearIcon && (
+          <i
+            className="pi pi-times absolute right-2 cursor-pointer text-xs text-gray-400 hover:text-gray-600"
+            onClick={handleClear}
+          />
+        )}
+      </div>
+    );
+  },
+);
+
+FilterInput.displayName = "FilterInput";
+
+/**
+ * Utility function to highlight matching text in search results
+ * @param text - The text to highlight
+ * @param filter - The filter string to match
+ * @returns JSX elements with highlighted matches
+ */
+export 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>
+      ),
+    );
+};

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export { FilterInput, highlightMatch } from "./FilterInput";
+export type { FilterInputProps } from "./FilterInput";

package/src/config/config.tsx

@@ -188,6 +188,7 @@ const pageEditorViewBase = {
   toolbar: editToolbar,
   rightSidebar: pageEditorRightSidebar,
   defaultCenterPanelView: editView,
+  titlebar: <Titlebar />,
 };
 
 export const getConfiguration = (): EditorConfiguration => {
@@ -567,6 +568,7 @@ export const getConfiguration = (): EditorConfiguration => {
           },
           rightSidebar: pageEditorRightSidebar,
           toolbar: editToolbar,
+          titlebar: <Titlebar />,
         },
 
         {
@@ -607,7 +609,8 @@ export const getConfiguration = (): EditorConfiguration => {
           name: "debug",
           title: "Debug",
           icon: <Bug strokeWidth={1} />,
-          toolbar: debugToolbar,
+          titlebar: <Titlebar />,
+          toolbar: <PageViewerControls />,
           leftSidebar: {
             panels: [
               {
@@ -713,7 +716,6 @@ export const getConfiguration = (): EditorConfiguration => {
         },
       ],
 
-      titlebar: <Titlebar />,
       itemActionsMenu: {
         itemsFactory: (editContext: EditContextType): MenuItemGroup[] => {
           const groups: MenuItemGroup[] = [];

package/src/config/types.ts

@@ -84,6 +84,7 @@ export type EditorView = {
   visible?: (editContext: EditContextType) => boolean;
   beforeClose?: (editContext: EditContextType) => Promise<boolean>;
   headerTitle?: (editContext: EditContextType) => string;
+  titlebar?: ReactNode;
 };
 
 export type ViewPanel = {
@@ -166,7 +167,7 @@ export type EditorConfiguration = {
     };
     mainNavigation?: (MenuItem | Command<any>)[];
     embedded?: boolean;
-    titlebar: ReactNode;
+
     contentTree: {
       contextMenu: {
         factory: (props: {

package/src/editor/ContextMenu.tsx

@@ -183,9 +183,7 @@ export const EditContextMenu = forwardRef<
   return (
     <ContextMenu>
       <ContextMenuTrigger>
-        <span id="contextmenu_canvas" ref={canvasRef}>
-          CM trigger
-        </span>
+        <span id="contextmenu_canvas" ref={canvasRef}></span>
       </ContextMenuTrigger>
       <ContextMenuContent>
         {menuItems.map((item, index) =>

package/src/editor/FieldList.tsx

@@ -5,7 +5,7 @@ import { useEditContext } from "./client/editContext";
 import { FieldListFieldWithFallbacks } from "./FieldListFieldWithFallbacks";
 import { SingleValidatorResult } from "../types";
 import { Field } from "./pageModel";
-import { InputText } from "primereact/inputtext";
+import { FilterInput } from "../components/FilterInput";
 import { Fragment, useState } from "react";
 import { Checkbox } from "primereact/checkbox";
 import uuid from "react-uuid";
@@ -46,22 +46,13 @@ export function FieldList({
 
   return (
     <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
-          className="flex-1 text-xs"
+      <div className="tour-field-list sticky top-0 z-10 ml-[1px] flex items-center gap-2 border-b border-gray-200 bg-white p-2">
+        <FilterInput
+          className="flex-1"
           value={searchFilter}
-          onChange={(x) => setSearchFilter(x.target.value)}
+          onChange={setSearchFilter}
+          placeholder="Filter fields..."
         />
-        {searchFilter && (
-          <SimpleIconButton
-            icon="pi pi-times"
-            onClick={() => setSearchFilter("")}
-            className="text-xs"
-            label="Clear"
-          />
-        )}
         {showStandardFieldsEnabled && (
           <>
             <Checkbox

package/src/editor/ImageEditButton.tsx

@@ -0,0 +1,78 @@
+import React, { ReactNode, useState } from "react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../components/ui/dropdown-menu";
+import { MagicEditImageIcon } from "./ui/Icons";
+
+export interface MenuAction {
+  id: string;
+  label: string;
+  icon: string;
+  onClick: (e?: React.MouseEvent) => void;
+  parameters?: any[];
+}
+
+interface ImageEditButtonProps {
+  /** Menu items to display in the dropdown */
+  actions: MenuAction[];
+  /** Custom trigger button content */
+  triggerButton?: ReactNode;
+  /** Whether to use the compact round button style (default: false) */
+  compact?: boolean;
+  /** Custom trigger button text (used with non-compact style) */
+  buttonText?: string;
+  /** Custom trigger button icon (used with compact style) */
+  buttonIcon?: string;
+  /** Test ID for the trigger button */
+  testId?: string;
+  /** Additional CSS classes for the trigger button */
+  buttonClassName?: string;
+}
+
+export function ImageEditButton({
+  actions,
+  triggerButton,
+
+  buttonText = "Edit",
+  buttonIcon = "pi pi-ellipsis-v",
+  testId = "menu-toggle-button",
+  buttonClassName,
+}: ImageEditButtonProps) {
+  const [showMenu, setShowMenu] = useState(false);
+
+  const defaultTriggerButton = (
+    <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 ${buttonClassName || ""}`}
+      onClick={(e) => {
+        e.stopPropagation();
+      }}
+      data-testid={testId}
+    >
+      <MagicEditImageIcon /> {buttonText}
+    </button>
+  );
+  return (
+    <DropdownMenu open={showMenu} onOpenChange={setShowMenu}>
+      <DropdownMenuTrigger asChild>
+        {triggerButton || defaultTriggerButton}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" side="top" sideOffset={8}>
+        {actions.map((action) => (
+          <DropdownMenuItem
+            key={action.id}
+            onClick={(e) => {
+              action.onClick(e);
+              setShowMenu(false);
+            }}
+          >
+            <i className={action.icon} />
+            {action.label}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/editor/ImageEditor.tsx

@@ -1,15 +1,9 @@
-import { MouseEventHandler, useCallback, useState } from "react";
+import { useCallback } from "react";
 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";
+import { ImageEditButton, MenuAction } from "./ImageEditButton";
 
 export function ImageEditor({
   field,
@@ -18,7 +12,6 @@ export function ImageEditor({
   field: ImageField;
   style?: React.CSSProperties;
 }) {
-  const [showMenu, setShowMenu] = useState(false);
   const editContext = useEditContext();
   //const dialogContext = useDialog();
 
@@ -62,90 +55,49 @@ export function ImageEditor({
     return field.value.alt;
   };
 
-  return (
-    <>
-      <div
-        className="absolute inset-0 flex items-center justify-center"
-        style={style}
-        data-testid="select-media"
-      >
-        {getImageSrc() && (
-          <img
-            src={getImageSrc()!}
-            alt={getImageAlt()}
-            className="max-h-full max-w-full object-contain"
-          />
-        )}
-
-        {/* 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) => (
-                <DropdownMenuItem
-                  key={button.id}
-                  onClick={() => {
-                    button?.clientAction?.({
-                      field,
-                      editContext,
-                      //dialogContext,
-                    });
-                    setShowMenu(false);
-                  }}
-                >
-                  <i className={button.icon} />
-                  {button.label}
-                </DropdownMenuItem>
-              ),
-            )}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-    </>
-  );
-}
+  // Build actions for the dropdown menu
+  const menuActions: MenuAction[] = [
+    {
+      id: "select",
+      label: getImageSrc() ? "Change Image" : "Select Image",
+      icon: "pi pi-image",
+      onClick: () => selectMedia(),
+    },
+    ...(editContext?.configuration?.fieldTypes["image"]?.buttons?.map(
+      (button: ClientFieldButton) => ({
+        id: button.id,
+        label: button.label,
+        icon: button.icon || "pi pi-bolt",
+        onClick: () => {
+          button?.clientAction?.({
+            field,
+            editContext,
+            //dialogContext,
+          });
+        },
+      }),
+    ) || []),
+  ];
 
-function Btn({
-  label,
-  icon,
-  onClick,
-  testId,
-  className,
-}: {
-  label: string;
-  icon?: string;
-  onClick?: MouseEventHandler<HTMLButtonElement>;
-  testId?: string;
-  className?: string;
-}) {
   return (
-    <button
-      className={`btn flex items-center gap-1.5 rounded-lg border border-gray-200 bg-gray-500 p-1.5 text-white opacity-70 hover:opacity-85 ${className}`}
-      onClick={onClick}
-      data-testid={testId}
+    <div
+      className="absolute inset-0 flex items-center justify-center"
+      style={style}
+      data-testid="select-media"
     >
-      <i className={icon} /> {label}
-    </button>
+      {getImageSrc() && (
+        <img
+          src={getImageSrc()!}
+          alt={getImageAlt()}
+          className="max-h-full max-w-full object-contain"
+        />
+      )}
+
+      <ImageEditButton
+        actions={menuActions}
+        compact={false}
+        buttonText="Edit"
+      />
+    </div>
   );
 }

package/src/editor/ItemInfo.tsx

@@ -19,7 +19,7 @@ export function ItemInfo({ item }: { item: FullItem | null }) {
   }
 
   return (
-    <div>
+    <div className="border-gray-3 border-b">
       <div className="my-2 flex items-center px-3 py-2">
         <img
           src={item.largeIcon}

package/src/editor/MainLayout.tsx

@@ -77,12 +77,12 @@ export default function MainLayout(props: MainLayoutProps) {
       <div className="flex flex-1">
         {!props.view.hideViewSelector && <LeftToolbar />}
         <div className="flex flex-1 flex-col">
-          {editContext?.configuration.editor.titlebar}
+          {editContext?.view?.titlebar}
           {editContext?.view?.toolbar}
           <div className="bg-gray-4 flex-1">
             <Splitter
+              splitterClassName="bg-transparent -mr-2 md:w-[8px]"
               localStorageKey="editor.panelSizes"
-              splitterClassName="bg-transparent"
               expandLabel={
                 <div className="flex items-center justify-center">
                   <Layers size={14} />

package/src/editor/MobileLayout.tsx

@@ -51,7 +51,7 @@ export function MobileLayout(props: MainLayoutProps) {
 
   return (
     <div className={cn("flex flex-col select-none", className)}>
-      {editContext?.configuration.editor.titlebar}
+      {editContext?.view?.titlebar}
 
       <Splitter
         panels={panels}