@alpaca-editor/core 1.0.3974 → 1.0.3978

package/src/components/ui/upload-button.tsx

@@ -0,0 +1,117 @@
+import * as React from "react";
+import { Button, buttonVariants } from "./button";
+import { cn } from "../../lib/utils";
+import { Upload } from "lucide-react";
+import { type VariantProps } from "class-variance-authority";
+
+interface UploadButtonProps
+  extends Omit<React.ComponentProps<"button">, "onChange">,
+    VariantProps<typeof buttonVariants> {
+  accept?: string;
+  multiple?: boolean;
+  onFileSelect?: (files: FileList) => void;
+  onUpload?: (response: any) => void;
+  uploadUrl?: string;
+  disabled?: boolean;
+  children?: React.ReactNode;
+  auto?: boolean;
+}
+
+function UploadButton({
+  className,
+  variant = "default",
+  size = "default",
+  accept = "*/*",
+  multiple = false,
+  onFileSelect,
+  onUpload,
+  uploadUrl,
+  disabled = false,
+  children,
+  auto = false,
+  ...props
+}: UploadButtonProps) {
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
+
+  const handleButtonClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileChange = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const files = event.target.files;
+    if (!files || files.length === 0) return;
+
+    onFileSelect?.(files);
+
+    if (auto && uploadUrl) {
+      await uploadFiles(files);
+    }
+
+    // Reset the input so the same file can be selected again
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  const uploadFiles = async (files: FileList) => {
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i];
+      if (!file) continue;
+
+      const formData = new FormData();
+      formData.append("file", file);
+
+      try {
+        const response = await fetch(uploadUrl!, {
+          method: "POST",
+          body: formData,
+        });
+
+        if (response.ok) {
+          const result = await response.text();
+          onUpload?.({
+            xhr: {
+              responseText: result,
+            },
+          });
+        } else {
+          console.error("Upload failed:", response.statusText);
+        }
+      } catch (error) {
+        console.error("Upload error:", error);
+      }
+    }
+  };
+
+  return (
+    <>
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        onChange={handleFileChange}
+        style={{ display: "none" }}
+      />
+      <Button
+        className={cn(className)}
+        variant={variant}
+        size={size}
+        onClick={handleButtonClick}
+        disabled={disabled}
+        {...props}
+      >
+        {children || (
+          <>
+            <Upload />
+            Upload
+          </>
+        )}
+      </Button>
+    </>
+  );
+}
+
+export { UploadButton };

package/src/config/config.tsx

@@ -121,7 +121,10 @@ import { Command } from "../editor/commands/commands";
 import { NewPage } from "../splash-screen/NewPage";
 import { OpenPage } from "../splash-screen/OpenPage";
 import { GenericToolbar } from "../editor/menubar/GenericToolbar";
-import { EditControls } from "../editor/menubar/toolbar-sections";
+import {
+  EditControls,
+  UtilityControls,
+} from "../editor/menubar/toolbar-sections";
 
 const defaultRichTextEditorProfile: RichTextEditorProfile = {
   toolbar: {
@@ -929,12 +932,14 @@ export function configureForUser(
   if (user.isLimitedPreviewUser) {
     const previewToolbar = (editContext: EditContextType) => (
       <GenericToolbar
-        left={[
-          { key: "review-commands", component: <ReviewCommands /> },
-          { key: "edit-mode", component: <EditControls /> },
+        left={[{ key: "review-commands", component: <ReviewCommands /> }]}
+        center={[{ key: "edit-mode", component: <EditControls /> }]}
+        right={[
+          {
+            key: "utility-controls",
+            component: <UtilityControls />,
+          },
         ]}
-        right={[]}
-        center={[]}
       />
     );
 

package/src/editor/ContentTree.tsx

@@ -714,6 +714,7 @@ export default function ContentTree({
         ref={treeContainerRef}
       >
         <MemoizedPerfectTree
+          enableKeyboardSearch={true}
           nodes={memoizedTreeNodes}
           expandedKeys={expandedKeys}
           onToggleExpand={handleToggleExpand}

package/src/editor/FieldActionsOverlay.tsx

@@ -271,7 +271,7 @@ const FieldActionsOverlay = React.forwardRef<
             {generatorButtons?.map((x) => (
               <button
                 key={x.id}
-                className="block p-1 text-xs hover:text-gray-400"
+                className="block cursor-pointer p-1 text-xs hover:text-gray-400"
                 onClick={() => handleActionClick(x)}
               >
                 {x.icon && <i className={x.icon + " mr-2 text-xs"} />}

package/src/editor/FieldList.tsx

@@ -7,9 +7,9 @@ import { SingleValidatorResult } from "../types";
 import { Field } from "./pageModel";
 import { FilterInput } from "../components/FilterInput";
 import { Fragment, useState } from "react";
-import { Checkbox } from "primereact/checkbox";
+
 import uuid from "react-uuid";
-import { SimpleIconButton } from "./ui/SimpleIconButton";
+import { Checkbox } from "../components/ui/checkbox";
 import { ChevronRight } from "lucide-react";
 import {
   Tooltip,
@@ -64,14 +64,18 @@ export function FieldList({
         />
         {showStandardFieldsEnabled && (
           <>
-            <Checkbox
-              inputId={uniqueId}
-              checked={showStandardFields}
-              onChange={(e: any) => setShowStandardFields(e.checked)}
-            />{" "}
-            <label htmlFor={uniqueId} className="cursor-pointer text-xs">
-              Show standard fields
-            </label>
+            <div className="flex items-center gap-1">
+              <Checkbox
+                id={uniqueId}
+                checked={showStandardFields}
+                onCheckedChange={(checked: boolean) =>
+                  setShowStandardFields(checked)
+                }
+              />{" "}
+              <label htmlFor={uniqueId} className="cursor-pointer text-xs">
+                Show standard fields
+              </label>
+            </div>
           </>
         )}
       </div>

package/src/editor/FieldListField.tsx

@@ -20,6 +20,7 @@ import { useThrottledCallback } from "use-debounce";
 import { SimpleIconButton } from "./ui/SimpleIconButton";
 import { FieldHistory } from "./FieldHistory";
 import { Copy, History, MessageCircle, WandSparkles } from "lucide-react";
+import { Checkbox } from "../components/ui/checkbox";
 
 export default function FieldListField({
   field,
@@ -166,7 +167,7 @@ export default function FieldListField({
         <>
           {(!executingAction || executingAction.state !== "running") && (
             <SimpleIconButton
-              icon={<WandSparkles strokeWidth={1} className="h-4 w-4" />}
+              icon={<WandSparkles strokeWidth={1} className="h-3.5 w-3.5" />}
               label="Generate"
               onClick={(e: any) => {
                 generatorsOverlay.current?.show(e);
@@ -277,27 +278,26 @@ export default function FieldListField({
                   );
                 })}
                 {!simplified && (
-                  <button
-                    className="text-gray-1 cursor-pointer p-0 text-xs"
-                    onClick={() => {
-                      setShowRawValue(!showRawValue);
-                    }}
-                  >
-                    <i
-                      className={
-                        "pi text-xs " +
-                        (showRawValue ? "pi-check-square" : "pi-stop")
-                      }
-                    />{" "}
-                    Raw
-                  </button>
+                  <div className="flex items-center gap-1.5 text-xs">
+                    <Checkbox
+                      className="size-3.5"
+                      checked={showRawValue}
+                      onCheckedChange={(checked) => setShowRawValue(!!checked)}
+                    />
+                    <label
+                      className="cursor-pointer"
+                      onClick={() => setShowRawValue(!showRawValue)}
+                    >
+                      Raw
+                    </label>
+                  </div>
                 )}
                 {field.rawValue && (
                   <div className="relative">
                     <button
                       className="text-gray-1 flex cursor-pointer items-center gap-1 p-0 text-xs"
                       onClick={() => {
-                        navigator.clipboard.writeText(field.rawValue!);
+                        navigator.clipboard.writeText(field.rawValue || "");
                         setShowCopiedHint(true);
                         setTimeout(() => setShowCopiedHint(false), 2000);
                       }}
@@ -319,7 +319,9 @@ export default function FieldListField({
                 )}
                 <div className="ml-auto flex items-center gap-1">
                   <SimpleIconButton
-                    icon={<MessageCircle strokeWidth={1} className="h-4 w-4" />}
+                    icon={
+                      <MessageCircle strokeWidth={1} className="h-3.5 w-3.5" />
+                    }
                     onClick={() => {
                       editContext.switchView("reviews");
                       editContext.addComment();
@@ -328,7 +330,7 @@ export default function FieldListField({
                   />
                   {!readonly && renderGeneratorButtons()}
                   <SimpleIconButton
-                    icon={<History strokeWidth={1} className="h-4 w-4" />}
+                    icon={<History strokeWidth={1} className="h-3.5 w-3.5" />}
                     onClick={(ev) => {
                       fieldHistoryOverlay.current?.toggle(ev);
                       ev.preventDefault();

package/src/editor/FieldListFieldWithFallbacks.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from "react";
 
 import FieldListField from "./FieldListField";
 import { useEditContext, useOperationsContext } from "./client/editContext";
+import { Checkbox } from "../components/ui/checkbox";
 
 import { SingleValidatorResult } from "../types";
 
@@ -147,17 +148,19 @@ export function FieldListFieldWithFallbacks({
   ]);
 
   const showFallbackButton = field?.isFallback && (
-    <button
-      className="p-0 text-xs"
-      onClick={() => setShowFallback(!showFallback)}
-    >
-      <i
-        className={
-          "pi text-xs " + (showFallback ? "pi-check-square" : "pi-stop")
-        }
-      />{" "}
-      Fallback
-    </button>
+    <div className="flex items-center gap-1.5 text-xs">
+      <Checkbox
+        className="size-3.5"
+        checked={showFallback}
+        onCheckedChange={(checked) => setShowFallback(!!checked)}
+      />
+      <label
+        className="cursor-pointer"
+        onClick={() => setShowFallback(!showFallback)}
+      >
+        Fallback
+      </label>
+    </div>
   );
 
   if (!field) {

package/src/editor/ImageEditor.tsx

@@ -30,7 +30,7 @@ export function ImageEditor({
 
   async function selectMedia() {
     const selectedImageId = await editContext?.selectMedia({
-      selectedIdPath: field.value?.src || "",
+      selectedIdPath: field.value?.idPath || "",
       mode: "images",
     });
     if (selectedImageId) imageSelected(selectedImageId);

package/src/editor/ItemInfo.tsx

@@ -14,7 +14,7 @@ export function ItemInfo({ item }: { item: FullItem | null }) {
   function formatRow(label: string, value: string) {
     return (
       <>
-        <div className="font-bold">{label}</div>
+        <div className="font-medium">{label}</div>
         <div>{value}</div>
       </>
     );
@@ -29,7 +29,7 @@ export function ItemInfo({ item }: { item: FullItem | null }) {
           className="mr-2"
           style={{ height: "32px", width: "32px" }}
         />
-        <h2 className="text-l flex items-center gap-1 font-bold">
+        <h2 className="text-l flex items-center gap-1 font-medium">
           {item.name}
           <SimpleIconButton
             onClick={() => {
@@ -38,26 +38,26 @@ export function ItemInfo({ item }: { item: FullItem | null }) {
                 data: { items: [item] },
               });
             }}
-            icon={<Pencil size={14} />}
+            icon={<Pencil size={14} strokeWidth={1} />}
             label="Rename"
           ></SimpleIconButton>
         </h2>
       </div>
       <Section title="Info">
-        <div className="grid grid-cols-[min-content_1fr] gap-3 text-xs">
-          <div className="font-bold">ID:</div>
+        <div className="grid grid-cols-[min-content_1fr] gap-3 text-xs font-light">
+          <div className="font-medium">ID:</div>
           <div className="flex items-center gap-1">
             {item.id} <CopyToClipboardButton text={item.id} />
           </div>
-          <div className="font-bold">Path:</div>
+          <div className="font-medium">Path:</div>
           <div className="flex items-center gap-1">
             {item.path} <CopyToClipboardButton text={item.path} />
           </div>
-          <div className="font-bold">Language:</div>
+          <div className="font-medium">Language:</div>
           <div>{item.language}</div>
-          <div className="font-bold">Version:</div>
+          <div className="font-medium">Version:</div>
           <div>{item.versions > 0 ? item.version : "No versions"}</div>
-          <div className="font-bold">Template:</div>
+          <div className="font-medium">Template:</div>
           <div className="flex items-center gap-1">
             <span
               className="cursor-pointer hover:underline"
@@ -80,7 +80,7 @@ export function ItemInfo({ item }: { item: FullItem | null }) {
             formatRow("Master languages", item.masterLanguages.join(", "))}
           {item.translations && (
             <>
-              <div className="font-bold">Languages</div>
+              <div className="font-medium">Languages</div>
               <div>{item.translations?.join(", ")}</div>
             </>
           )}

package/src/editor/commands/componentCommands.tsx

@@ -14,6 +14,7 @@ import {
   Check,
   Copy,
   MessageCircleMore,
+  MessageCirclePlus,
   Palette,
   Plus,
   RefreshCcw,
@@ -407,7 +408,7 @@ function getCreateCommentCommand(
   return {
     id: "addComment",
     label: "Add Comment",
-    icon: <MessageCircleMore size={14} />,
+    icon: <MessageCirclePlus size={14} />,
     disabled: () => false,
     visibilityScopes: ["contextMenu"],
     execute: async (context: CommandContext<any>) => {

package/src/editor/context-menu/InsertMenu.tsx

@@ -325,8 +325,9 @@ export const InsertMenuTemplate = ({
           border: "1px solid #ddd",
         }}
       >
-        <div className="absolute inset-4 flex flex-col">
+        <div className="absolute inset-4 flex flex-col text-xs">
           <SimpleTabs
+            className="border-gray-3 mb-2 border-b"
             tabs={tabs}
             setActiveTab={setActiveTab}
             activeTab={activeTab}

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

@@ -2,7 +2,7 @@
 
 import { useEditContext } from "../client/editContext";
 
-import { Checkbox } from "primereact/checkbox";
+import { Checkbox } from "../../components/ui/checkbox";
 import { useEffect, useState } from "react";
 import { ProgressSpinner } from "primereact/progressspinner";
 import { CheckboxField } from "../fieldTypes";
@@ -34,11 +34,11 @@ export function CheckboxEditor({
       key={fieldItem.id + field.id + fieldItem.language + fieldItem.version}
       checked={field.value}
       disabled={readOnly}
-      onClick={() => {
+      onCheckedChange={(checked) => {
         setIsUpdating(true);
         editContext.operations.editField({
           field: field.descriptor,
-          rawValue: field.value ? "0" : "1",
+          rawValue: checked ? "1" : "0",
           refresh: "immediate",
         });
       }}

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

@@ -47,7 +47,7 @@ export function ImageFieldEditor({
           key={item!.id + field.id + item!.language + item!.version}
           value={altText}
           disabled={readOnly}
-          className="focus-shadow bg-gray-5 p-1.5 text-sm"
+          className="focus-shadow bg-gray-5 p-1.5 text-xs"
           style={{ width: "100%" }}
           onChange={(e) => {
             setAltText(e.target.value);

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
+import { ChevronDown } from "lucide-react";
 
 import { Link } from "../LinkEditorDialog";
 import { useEditContext } from "../client/editContext";
@@ -121,7 +122,7 @@ export function InternalLinkFieldEditor({
         <div
           ref={texboxRef}
           className={classNames(
-            "justiy-between focus-shadow flex cursor-pointer justify-between border p-1.5 text-sm",
+            "justiy-between focus-shadow flex cursor-pointer justify-between border p-1.5 text-xs",
             readOnly ? "bg-gray-50" : "bg-white",
           )}
           onClick={(e) => {
@@ -137,9 +138,12 @@ export function InternalLinkFieldEditor({
             <span>&nbsp;</span>
           )}
           {!readOnly && (
-            <i
-              className={`pi ${showTree ? "pi-angle-up" : "pi-angle-down"} `}
-            ></i>
+            <ChevronDown
+              strokeWidth={1}
+              className={`h-4 w-4 transition-transform duration-200 ${
+                showTree ? "rotate-180" : "rotate-0"
+              }`}
+            />
           )}
         </div>
         <div ref={dropdownRef} className="w-0"></div>

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

@@ -34,7 +34,7 @@ export function LinkFieldEditor({
     <>
       <div
         className={classNames(
-          "focus-shadow flex justify-between border border-gray-300 p-2",
+          "focus-shadow border-gray-3 bg-gray-5 flex justify-between border p-2",
           readOnly ? "bg-gray-100" : "cursor-pointer bg-white",
         )}
         onClick={(e) => {

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

@@ -40,7 +40,7 @@ export function RawEditor({
       key={fieldItem.id + field.id + fieldItem.language + fieldItem.version}
       value={value || ""}
       disabled={readOnly}
-      className="p-2 focus-shadow text-sm"
+      className="focus-shadow bg-gray-5 p-2 text-xs"
       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 bg-gray-5 p-1.5 text-sm"
+        className="focus-shadow bg-gray-5 p-1.5 text-xs"
         style={{ width: "100%" }}
         onChange={handleChange}
         onSelect={handleSelect}

package/src/editor/fieldTypes.ts

@@ -77,6 +77,7 @@ export type ImageField = Field & {
 export type ImageValue = {
   alt: string;
   src: string;
+  idPath?: string;
 };
 
 export type LinkValue = {

package/src/editor/media-selector/AiImageSearch.tsx

@@ -6,7 +6,8 @@ import { executePrompt, executeSearch } from "../services/aiService";
 import { useEditContext } from "../client/editContext";
 import { ProgressSpinner } from "primereact/progressspinner";
 import { InputText } from "primereact/inputtext";
-import { Thumbnail, Thumbnails } from "./Thumbnails";
+import { Thumbnail } from "../services/contentService";
+import { Thumbnails } from "./Thumbnails";
 import { Splitter, SplitterPanel } from "primereact/splitter";
 import { Preview } from "./Preview";
 import DialogButtons from "../ui/DialogButtons";

package/src/editor/media-selector/AiImageSearchPrompt.tsx

@@ -1,10 +1,9 @@
-import { Button } from "primereact/button";
-import { InputText } from "primereact/inputtext";
 import { useEffect, useRef, useState } from "react";
 import { useEditContext } from "../client/editContext";
 import { executePrompt } from "../services/aiService";
 import { createEditorAiContext } from "../ai/editorAiContext";
-import { ProgressSpinner } from "primereact/progressspinner";
+import { FilterInput } from "../../components/FilterInput";
+import { ActionButton } from "../../components/ActionButton";
 
 export function AiImageSearchPrompt({
   onSearchPromptChange,
@@ -69,26 +68,46 @@ export function AiImageSearchPrompt({
 
   return (
     <div className="m-2 flex items-center gap-2">
-      <i className="pi pi-search text-gray-500" />
-      <InputText
-        ref={inputRef} // Add ref to InputText
+      <FilterInput
+        ref={inputRef}
         value={prompt}
-        onChange={(e) => setPrompt(e.target.value)}
+        onChange={setPrompt}
         className="flex-1"
+        placeholder="Enter search terms for image..."
+        loading={loadingPrompt}
+        showSearchIcon={true}
+        showClearIcon={true}
+        size="md"
       />
-      {loadingPrompt && (
-        <div className="flex h-10 items-center">
-          <ProgressSpinner style={{ width: "24px", height: "24px" }} />
-        </div>
-      )}
-      {!loadingPrompt && (
-        <Button
-          icon="pi pi-sparkles"
-          onClick={() => suggestPrompt()}
-          label="Suggest"
-          size="small"
-        />
-      )}
+      <ActionButton
+        onClick={() => suggestPrompt()}
+        isLoading={loadingPrompt}
+        loadingText="Suggesting..."
+        disabled={loadingPrompt}
+        variant="outline"
+      >
+        <svg
+          width="22"
+          height="20"
+          viewBox="0 0 22 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M14.0062 3.46766C14.2345 3.41253 14.4444 3.35739 14.6542 3.30225C14.9073 3.23485 15.1665 3.17971 15.4134 3.09394C16.37 2.7386 16.9748 2.06467 17.2341 1.09054C17.3266 0.735194 17.4192 0.37985 17.5118 0.0306331C17.5118 0.0183798 17.5118 0.0122532 17.5303 0C17.5488 0.0612662 17.5612 0.122532 17.5797 0.183799C17.6784 0.557522 17.7587 0.931246 17.8821 1.29884C18.2154 2.2791 18.9005 2.91014 19.9065 3.18584C20.2644 3.28387 20.6286 3.36964 20.9865 3.46766C21.0051 3.46766 21.0174 3.47379 21.0483 3.48604C20.9125 3.5228 20.7891 3.55344 20.6594 3.58407C20.3262 3.67597 19.9867 3.74336 19.6596 3.85364C18.7091 4.19061 18.0981 4.85841 17.8266 5.82641C17.7216 6.20014 17.6291 6.57386 17.518 6.95371C17.518 6.93533 17.5056 6.91695 17.4994 6.89857C17.4007 6.51872 17.3143 6.13887 17.197 5.76515C16.8823 4.72975 16.191 4.06195 15.1356 3.774C14.7777 3.67597 14.4197 3.5902 14.0617 3.4983C14.0432 3.4983 14.0309 3.49217 14 3.47992L14.0062 3.46766Z"
+            fill="#9650FB"
+          />
+          <path
+            d="M0.5 9.29394C1.04312 9.15303 1.54922 9.02437 2.05531 8.88958C2.66632 8.72416 3.28968 8.60163 3.88218 8.3872C6.17811 7.54173 7.63467 5.91817 8.2642 3.57168C8.49256 2.72008 8.71475 1.86848 8.93694 1.01688C8.94311 0.992372 8.94928 0.967866 8.98014 0.943359C9.01717 1.0904 9.06037 1.23744 9.09741 1.37835C9.33194 2.27284 9.52326 3.17957 9.81951 4.05568C10.6219 6.42055 12.2636 7.9277 14.6829 8.58938C15.547 8.82219 16.4172 9.03662 17.2813 9.2633C17.3183 9.27556 17.3554 9.28168 17.4232 9.30619C17.09 9.39196 16.7937 9.46548 16.4913 9.54513C15.689 9.75956 14.8681 9.91885 14.0904 10.2007C11.8007 11.0155 10.3379 12.6207 9.6899 14.9488C9.43686 15.8494 9.21467 16.75 8.95545 17.6629C8.94311 17.62 8.93077 17.5771 8.91842 17.5281C8.67772 16.6152 8.47405 15.6963 8.19631 14.7956C7.43717 12.3021 5.77077 10.7031 3.24031 10.0108C2.38242 9.77794 1.51836 9.56351 0.654297 9.34295C0.617265 9.3307 0.580234 9.32457 0.5 9.30006L0.5 9.29394Z"
+            fill="#9650FB"
+          />
+          <path
+            d="M14.0062 15.7881C14.2345 15.733 14.4444 15.6778 14.6542 15.6227C14.9073 15.5553 15.1665 15.5001 15.4134 15.4144C16.37 15.059 16.9748 14.3851 17.2341 13.411C17.3266 13.0556 17.4192 12.7003 17.5118 12.3511C17.5118 12.3388 17.5118 12.3327 17.5303 12.3204C17.5488 12.3817 17.5612 12.443 17.5797 12.5042C17.6784 12.878 17.7587 13.2517 17.8821 13.6193C18.2154 14.5995 18.9005 15.2306 19.9065 15.5063C20.2644 15.6043 20.6286 15.6901 20.9865 15.7881C21.0051 15.7881 21.0174 15.7942 21.0483 15.8065C20.9125 15.8432 20.7891 15.8739 20.6594 15.9045C20.3262 15.9964 19.9867 16.0638 19.6596 16.1741C18.7091 16.511 18.0981 17.1788 17.8266 18.1468C17.7216 18.5206 17.6291 18.8943 17.518 19.2741C17.518 19.2558 17.5056 19.2374 17.4994 19.219C17.4007 18.8392 17.3143 18.4593 17.197 18.0856C16.8823 17.0502 16.191 16.3824 15.1356 16.0944C14.7777 15.9964 14.4197 15.9106 14.0617 15.8187C14.0432 15.8187 14.0309 15.8126 14 15.8004L14.0062 15.7881Z"
+            fill="#9650FB"
+          />
+        </svg>
+        Suggest search terms
+      </ActionButton>
     </div>
   );
 }

package/src/editor/media-selector/MediaFolderBrowser.tsx

@@ -4,7 +4,7 @@ import { Button } from "primereact/button";
 import { ProgressSpinner } from "primereact/progressspinner";
 import { useEditContext } from "../client/editContext";
 import { getChildren } from "../services/contentService";
-import { Thumbnail } from "./Thumbnails";
+import { Thumbnail } from "../services/contentService";
 
 type ViewMode = "grid" | "list" | "large-grid";