tinacms 2.6.2 → 2.6.3

package/dist/index.js

@@ -5197,7 +5197,7 @@ flowchart TD
       side: "bottom",
       className: cn(
         "rounded-md border bg-white p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        "max-h-[30vh] max-w-[30vh] overflow-y-auto",
+        "max-h-[30vh] max-w-[30vw] overflow-y-auto",
         className
       ),
       ...props
@@ -5289,11 +5289,7 @@ flowchart TD
     const node = nodes.find((node2) => node2.id === value);
     return node ? node._internalSys.filename : null;
   };
-  const ComboboxDemo = ({
-    cms,
-    input,
-    field
-  }) => {
+  const Combobox = ({ cms, input, field }) => {
     const [open2, setOpen] = React__namespace.useState(false);
     const [value, setValue] = React__namespace.useState(input.value);
     const [displayText, setDisplayText] = React__namespace.useState(null);
@@ -5317,17 +5313,17 @@ flowchart TD
     if (loading === true) {
       return /* @__PURE__ */ React__namespace.createElement(LoadingDots, { color: "var(--tina-color-primary)" });
     }
-    return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(Popover, { open: open2, onOpenChange: setOpen }, /* @__PURE__ */ React__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React__namespace.createElement(
+    return /* @__PURE__ */ React__namespace.createElement(Popover, { open: open2, onOpenChange: setOpen }, /* @__PURE__ */ React__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React__namespace.createElement(
       Button,
       {
         variant: "outline",
         role: "combobox",
         "aria-expanded": open2,
-        className: "w-52 justify-between"
+        className: "w-full justify-between"
       },
       /* @__PURE__ */ React__namespace.createElement("p", { className: "truncate" }, displayText ?? "Choose an option..."),
       open2 ? /* @__PURE__ */ React__namespace.createElement(IoMdArrowDropup, { size: 20 }) : /* @__PURE__ */ React__namespace.createElement(IoMdArrowDropdown, { size: 20 })
-    )), /* @__PURE__ */ React__namespace.createElement(PopoverContent, { className: "p-0 relative" }, /* @__PURE__ */ React__namespace.createElement(
+    )), /* @__PURE__ */ React__namespace.createElement(PopoverContent, { className: "p-0 relative min-w-[var(--radix-popover-trigger-width)]" }, /* @__PURE__ */ React__namespace.createElement(
       Command,
       {
         shouldFilter: !field.experimental___filter,
@@ -5351,32 +5347,25 @@ flowchart TD
         }
       ),
       /* @__PURE__ */ React__namespace.createElement(CommandEmpty, null, "No reference found"),
-      /* @__PURE__ */ React__namespace.createElement(CommandList, null, filteredOptionsList.length > 0 && (filteredOptionsList == null ? void 0 : filteredOptionsList.map(({ collection, edges }) => /* @__PURE__ */ React__namespace.createElement(
-        CommandGroup,
-        {
-          key: `${collection}-group`,
-          heading: collection
-        },
-        /* @__PURE__ */ React__namespace.createElement(CommandList, null, edges == null ? void 0 : edges.map(({ node }) => {
-          const { id, _values } = node;
-          return /* @__PURE__ */ React__namespace.createElement(
-            OptionComponent,
-            {
-              id,
-              key: id,
-              value,
-              field,
-              _values,
-              node,
-              onSelect: (currentValue) => {
-                setValue(currentValue);
-                setOpen(false);
-              }
+      /* @__PURE__ */ React__namespace.createElement(CommandList, null, filteredOptionsList.length > 0 && (filteredOptionsList == null ? void 0 : filteredOptionsList.map(({ collection, edges }) => /* @__PURE__ */ React__namespace.createElement(CommandGroup, { key: `${collection}-group`, heading: collection }, /* @__PURE__ */ React__namespace.createElement(CommandList, null, edges == null ? void 0 : edges.map(({ node }) => {
+        const { id, _values } = node;
+        return /* @__PURE__ */ React__namespace.createElement(
+          OptionComponent,
+          {
+            id,
+            key: id,
+            value,
+            field,
+            _values,
+            node,
+            onSelect: (currentValue) => {
+              setValue(currentValue);
+              setOpen(false);
             }
-          );
-        }))
-      ))))
-    ))));
+          }
+        );
+      }))))))
+    )));
   };
   const useGetNode = (cms, id) => {
     const [document2, setDocument] = React__namespace.useState(
@@ -5449,7 +5438,7 @@ flowchart TD
   };
   const Reference = ({ input, field }) => {
     const cms = useCMS();
-    return /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement("div", { className: "relative group" }, /* @__PURE__ */ React__namespace.createElement(ComboboxDemo, { cms, input, field })), /* @__PURE__ */ React__namespace.createElement(ReferenceLink, { cms, input }));
+    return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement("div", { className: "relative group" }, /* @__PURE__ */ React__namespace.createElement(Combobox, { cms, input, field })), /* @__PURE__ */ React__namespace.createElement(ReferenceLink, { cms, input }));
   };
   const ButtonToggle = ({
     input,
@@ -9300,6 +9289,19 @@ flowchart TD
       }
     }
   }
+  const encodeUrlIfNeeded = (url) => {
+    if (url) {
+      try {
+        const parsed = new URL(url);
+        parsed.pathname = parsed.pathname.split("/").filter((part) => part !== "").map(encodeURIComponent).join("/");
+        return parsed.toString();
+      } catch (e) {
+        return url;
+      }
+    } else {
+      return url;
+    }
+  };
   let MediaManager$1 = class MediaManager {
     constructor(store, events) {
       this.store = store;
@@ -9372,6 +9374,20 @@ flowchart TD
       try {
         this.events.dispatch({ type: "media:list:start", ...options });
         const media = await this.store.list(options);
+        media.items = media.items.map((item) => {
+          if (item.type === "dir") {
+            return item;
+          }
+          if (item.thumbnails) {
+            for (const [size, src] of Object.entries(item.thumbnails)) {
+              item.thumbnails[size] = encodeUrlIfNeeded(src);
+            }
+          }
+          return {
+            ...item,
+            src: encodeUrlIfNeeded(item.src)
+          };
+        });
         this.events.dispatch({ type: "media:list:success", ...options, media });
         return media;
       } catch (error) {
@@ -10179,7 +10195,7 @@ flowchart TD
       "Event Log"
     ));
   };
-  const version = "2.6.2";
+  const version = "2.6.3";
   const Nav = ({
     isLocalMode,
     className = "",
@@ -14499,7 +14515,7 @@ flowchart TD
         key: template.name,
         onMouseDown: (e) => {
           e.preventDefault();
-          close();
+          setOpen(false);
           insertMDX(editor, template);
         },
         className: ""
@@ -33093,15 +33109,24 @@ This will work when developing locally but NOT when deployed to production.
           }
         }
         if (state === "creatingPR") {
-          const foo = await tinaApi.createPullRequest({
-            baseBranch,
-            branch,
-            title: `${branch.replace("tina/", "").replace("-", " ")} (PR from TinaCMS)`
-          });
-          console.log("PR created", foo);
-          cms.alerts.success("Pull request created.");
-          localStorage.setItem("tina.createBranchState", "done");
-          setState("done");
+          try {
+            const foo = await tinaApi.createPullRequest({
+              baseBranch,
+              branch,
+              title: `${branch.replace("tina/", "").replace("-", " ")} (PR from TinaCMS)`
+            });
+            console.log("PR created", foo);
+            cms.alerts.success("Pull request created.");
+            localStorage.setItem("tina.createBranchState", "done");
+            setState("done");
+          } catch (e) {
+            console.error(e);
+            cms.alerts.error("Failed to create PR");
+            setErrorMessage(
+              "Failed to create PR, please try again. If the problem persists please contact support."
+            );
+            setState("error");
+          }
         }
         if (state === "done") {
           window.location.href = back;

package/dist/index.mjs

@@ -15,12 +15,12 @@ import { ELEMENT_SLASH_INPUT, createSlashPlugin } from "@udecode/plate-slash-com
 import { useSelected, useReadOnly, ReactEditor } from "slate-react";
 import { useCodeBlockElementState, useCodeSyntaxLeaf, ELEMENT_CODE_BLOCK as ELEMENT_CODE_BLOCK$1 } from "@udecode/plate-code-block";
 import MonacoEditor, { loader, useMonaco } from "@monaco-editor/react";
-import { Combobox, ComboboxInput, ComboboxButton, Transition, ComboboxOptions, ComboboxOption, Popover as Popover$3, PopoverButton, PopoverPanel, TransitionChild, Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/react";
+import { Combobox as Combobox$1, ComboboxInput, ComboboxButton, Transition, ComboboxOptions, ComboboxOption, Popover as Popover$3, PopoverButton, PopoverPanel, TransitionChild, Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/react";
 import { cva } from "class-variance-authority";
 import { Eye, SquarePen, Plus, AlignCenter as AlignCenter$1, AlignJustify, AlignLeft as AlignLeft$1, AlignRight as AlignRight$1, ChevronDown, PaintBucket, Quote, Check, ChevronRight, ChevronsUpDown, X, FileCode, Baseline, RectangleVertical, Combine, Ungroup, MessageSquare, MessageSquarePlus, Trash, GripVertical, Edit2, Smile, ExternalLink, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Indent, Keyboard, WrapText, Minus, MoreHorizontal, Outdent, Pilcrow, RotateCcw, RectangleHorizontal, Search, Settings, Strikethrough, Subscript, Superscript, Table, Text, Underline, Link2Off, Moon, SunMedium, Twitter } from "lucide-react";
 import mermaid from "mermaid";
 import { ELEMENT_H1, ELEMENT_H2, ELEMENT_H3, ELEMENT_H4 as ELEMENT_H4$1, ELEMENT_H5 as ELEMENT_H5$1, ELEMENT_H6 as ELEMENT_H6$1 } from "@udecode/plate-heading";
-import { useComboboxContext, Combobox as Combobox$1, useComboboxStore, ComboboxProvider, Portal, ComboboxPopover, ComboboxItem } from "@ariakit/react";
+import { useComboboxContext, Combobox as Combobox$2, useComboboxStore, ComboboxProvider, Portal, ComboboxPopover, ComboboxItem } from "@ariakit/react";
 import { useHTMLInputCursorState, useComboboxInput, filterWords } from "@udecode/plate-combobox";
 import { useTableCellElementState, useTableCellElement, useTableCellElementResizableState, useTableCellElementResizable, useTableBordersDropdownMenuContentState, useTableMergeState, TableProvider, useTableElementState, useTableElement, mergeTableCells, unmergeTableCells, ELEMENT_TABLE as ELEMENT_TABLE$1, getTableColumnCount, insertTable, deleteTable, insertTableColumn, deleteColumn, insertTableRow, deleteRow } from "@udecode/plate-table";
 import { ResizeHandle as ResizeHandle$1 } from "@udecode/plate-resizable";
@@ -992,7 +992,7 @@ const Autocomplete = ({
     }
   }, [items2, query]);
   return /* @__PURE__ */ React__default.createElement(
-    Combobox,
+    Combobox$1,
     {
       value,
       onChange,
@@ -2173,7 +2173,7 @@ const InlineComboboxInput = forwardRef(({ className, ...props }, propRef) => {
     },
     value || "​"
   ), /* @__PURE__ */ React__default.createElement(
-    Combobox$1,
+    Combobox$2,
     {
       autoSelect: true,
       className: cn$1(
@@ -5224,7 +5224,7 @@ const PopoverContent = React.forwardRef(({ className, align = "center", sideOffs
     side: "bottom",
     className: cn(
       "rounded-md border bg-white p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      "max-h-[30vh] max-w-[30vh] overflow-y-auto",
+      "max-h-[30vh] max-w-[30vw] overflow-y-auto",
       className
     ),
     ...props
@@ -5316,11 +5316,7 @@ const getFilename = (optionSets, value) => {
   const node = nodes.find((node2) => node2.id === value);
   return node ? node._internalSys.filename : null;
 };
-const ComboboxDemo = ({
-  cms,
-  input,
-  field
-}) => {
+const Combobox = ({ cms, input, field }) => {
   const [open2, setOpen] = React.useState(false);
   const [value, setValue] = React.useState(input.value);
   const [displayText, setDisplayText] = React.useState(null);
@@ -5344,17 +5340,17 @@ const ComboboxDemo = ({
   if (loading === true) {
     return /* @__PURE__ */ React.createElement(LoadingDots, { color: "var(--tina-color-primary)" });
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Popover, { open: open2, onOpenChange: setOpen }, /* @__PURE__ */ React.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Popover, { open: open2, onOpenChange: setOpen }, /* @__PURE__ */ React.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
     Button,
     {
       variant: "outline",
       role: "combobox",
       "aria-expanded": open2,
-      className: "w-52 justify-between"
+      className: "w-full justify-between"
     },
     /* @__PURE__ */ React.createElement("p", { className: "truncate" }, displayText ?? "Choose an option..."),
     open2 ? /* @__PURE__ */ React.createElement(IoMdArrowDropup, { size: 20 }) : /* @__PURE__ */ React.createElement(IoMdArrowDropdown, { size: 20 })
-  )), /* @__PURE__ */ React.createElement(PopoverContent, { className: "p-0 relative" }, /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement(PopoverContent, { className: "p-0 relative min-w-[var(--radix-popover-trigger-width)]" }, /* @__PURE__ */ React.createElement(
     Command,
     {
       shouldFilter: !field.experimental___filter,
@@ -5378,32 +5374,25 @@ const ComboboxDemo = ({
       }
     ),
     /* @__PURE__ */ React.createElement(CommandEmpty, null, "No reference found"),
-    /* @__PURE__ */ React.createElement(CommandList, null, filteredOptionsList.length > 0 && (filteredOptionsList == null ? void 0 : filteredOptionsList.map(({ collection, edges }) => /* @__PURE__ */ React.createElement(
-      CommandGroup,
-      {
-        key: `${collection}-group`,
-        heading: collection
-      },
-      /* @__PURE__ */ React.createElement(CommandList, null, edges == null ? void 0 : edges.map(({ node }) => {
-        const { id, _values } = node;
-        return /* @__PURE__ */ React.createElement(
-          OptionComponent,
-          {
-            id,
-            key: id,
-            value,
-            field,
-            _values,
-            node,
-            onSelect: (currentValue) => {
-              setValue(currentValue);
-              setOpen(false);
-            }
+    /* @__PURE__ */ React.createElement(CommandList, null, filteredOptionsList.length > 0 && (filteredOptionsList == null ? void 0 : filteredOptionsList.map(({ collection, edges }) => /* @__PURE__ */ React.createElement(CommandGroup, { key: `${collection}-group`, heading: collection }, /* @__PURE__ */ React.createElement(CommandList, null, edges == null ? void 0 : edges.map(({ node }) => {
+      const { id, _values } = node;
+      return /* @__PURE__ */ React.createElement(
+        OptionComponent,
+        {
+          id,
+          key: id,
+          value,
+          field,
+          _values,
+          node,
+          onSelect: (currentValue) => {
+            setValue(currentValue);
+            setOpen(false);
           }
-        );
-      }))
-    ))))
-  ))));
+        }
+      );
+    }))))))
+  )));
 };
 const useGetNode = (cms, id) => {
   const [document2, setDocument] = React.useState(
@@ -5476,7 +5465,7 @@ const ReferenceLink = ({ cms, input }) => {
 };
 const Reference = ({ input, field }) => {
   const cms = useCMS();
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "relative group" }, /* @__PURE__ */ React.createElement(ComboboxDemo, { cms, input, field })), /* @__PURE__ */ React.createElement(ReferenceLink, { cms, input }));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "relative group" }, /* @__PURE__ */ React.createElement(Combobox, { cms, input, field })), /* @__PURE__ */ React.createElement(ReferenceLink, { cms, input }));
 };
 const ButtonToggle = ({
   input,
@@ -9327,6 +9316,19 @@ class TinaMediaStore {
     }
   }
 }
+const encodeUrlIfNeeded = (url) => {
+  if (url) {
+    try {
+      const parsed = new URL(url);
+      parsed.pathname = parsed.pathname.split("/").filter((part) => part !== "").map(encodeURIComponent).join("/");
+      return parsed.toString();
+    } catch (e) {
+      return url;
+    }
+  } else {
+    return url;
+  }
+};
 let MediaManager$1 = class MediaManager {
   constructor(store, events) {
     this.store = store;
@@ -9399,6 +9401,20 @@ let MediaManager$1 = class MediaManager {
     try {
       this.events.dispatch({ type: "media:list:start", ...options });
       const media = await this.store.list(options);
+      media.items = media.items.map((item) => {
+        if (item.type === "dir") {
+          return item;
+        }
+        if (item.thumbnails) {
+          for (const [size, src] of Object.entries(item.thumbnails)) {
+            item.thumbnails[size] = encodeUrlIfNeeded(src);
+          }
+        }
+        return {
+          ...item,
+          src: encodeUrlIfNeeded(item.src)
+        };
+      });
       this.events.dispatch({ type: "media:list:success", ...options, media });
       return media;
     } catch (error) {
@@ -10206,7 +10222,7 @@ const SyncStatus = ({ cms, setEventsOpen }) => {
     "Event Log"
   ));
 };
-const version = "2.6.2";
+const version = "2.6.3";
 const Nav = ({
   isLocalMode,
   className = "",
@@ -14526,7 +14542,7 @@ const EmbedButton = ({ editor, templates }) => {
       key: template.name,
       onMouseDown: (e) => {
         e.preventDefault();
-        close();
+        setOpen(false);
         insertMDX(editor, template);
       },
       className: ""
@@ -33120,15 +33136,24 @@ const IndexingPage = () => {
         }
       }
       if (state === "creatingPR") {
-        const foo = await tinaApi.createPullRequest({
-          baseBranch,
-          branch,
-          title: `${branch.replace("tina/", "").replace("-", " ")} (PR from TinaCMS)`
-        });
-        console.log("PR created", foo);
-        cms.alerts.success("Pull request created.");
-        localStorage.setItem("tina.createBranchState", "done");
-        setState("done");
+        try {
+          const foo = await tinaApi.createPullRequest({
+            baseBranch,
+            branch,
+            title: `${branch.replace("tina/", "").replace("-", " ")} (PR from TinaCMS)`
+          });
+          console.log("PR created", foo);
+          cms.alerts.success("Pull request created.");
+          localStorage.setItem("tina.createBranchState", "done");
+          setState("done");
+        } catch (e) {
+          console.error(e);
+          cms.alerts.error("Failed to create PR");
+          setErrorMessage(
+            "Failed to create PR, please try again. If the problem persists please contact support."
+          );
+          setState("error");
+        }
       }
       if (state === "done") {
         window.location.href = back;

package/dist/toolkit/fields/components/reference/reference-select.d.ts

@@ -7,5 +7,5 @@ interface ReferenceSelectProps {
     input: any;
     field: ReferenceFieldProps & Field;
 }
-declare const ComboboxDemo: React.FC<ReferenceSelectProps>;
-export default ComboboxDemo;
+declare const Combobox: React.FC<ReferenceSelectProps>;
+export default Combobox;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinacms",
-  "version": "2.6.2",
+  "version": "2.6.3",
   "main": "dist/index.js",
   "module": "./dist/index.mjs",
   "exports": {
@@ -129,9 +129,9 @@
     "webfontloader": "1.6.28",
     "yup": "^1.4.0",
     "zod": "^3.23.8",
-    "@tinacms/mdx": "1.5.4",
     "@tinacms/search": "1.0.38",
-    "@tinacms/schema-tools": "1.7.0"
+    "@tinacms/schema-tools": "1.7.0",
+    "@tinacms/mdx": "1.5.4"
   },
   "devDependencies": {
     "@graphql-tools/utils": "^10.5.6",