tinacms 3.6.0 → 3.6.2

package/dist/auth/authenticate.d.ts

@@ -7,4 +7,7 @@ export type TokenObject = {
     access_token?: string;
     refresh_token?: string;
 };
+export declare class AuthenticationCancelledError extends Error {
+    constructor(message?: string);
+}
 export declare const authenticate: (clientId: string, frontendUrl: string) => Promise<TokenObject>;

package/dist/index.js

@@ -7,7 +7,7 @@ var __publicField = (obj, key, value) => {
 var _a;
 import { z } from "zod";
 import * as React from "react";
-import React__default, { useState, useCallback, useContext, createContext, forwardRef, useRef, useReducer, useMemo, useEffect, useLayoutEffect, Component, memo, useDebugValue, useId, startTransition, useImperativeHandle } from "react";
+import React__default, { useState, useCallback, useContext, createContext, forwardRef, useRef, useReducer, useMemo, useEffect, useLayoutEffect, Component, memo, useDebugValue, useId, startTransition, useImperativeHandle, Fragment } from "react";
 import ReactDOM, { createPortal } from "react-dom";
 import clsx$1, { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -45,6 +45,7 @@ import { sortableKeyboardCoordinates, useSortable, SortableContext, verticalList
 import { CSS } from "@dnd-kit/utilities";
 import { buildSchema, print, getIntrospectionQuery, buildClientSchema, parse as parse$4 } from "graphql";
 import { diff as diff$1 } from "@graphql-inspector/core";
+import posthog from "posthog-js";
 import { get as get$6, to as to$1 } from "color-string";
 import { HexColorPicker } from "react-colorful";
 import * as dropzone from "react-dropzone";
@@ -63,7 +64,6 @@ import { DayPicker } from "react-day-picker";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { formatDistanceToNow } from "date-fns";
 import { useReactTable, getCoreRowModel, getSortedRowModel, flexRender } from "@tanstack/react-table";
-import posthog from "posthog-js";
 import { TinaSchema, addNamespaceToSchema, parseURL, resolveForm, normalizePath, canonicalPath, validateSchema } from "@tinacms/schema-tools";
 import { NAMER, resolveField } from "@tinacms/schema-tools";
 import gql from "graphql-tag";
@@ -811,7 +811,7 @@ const ModalHeader = ({ children, close: close2 }) => {
   ));
 };
 const ModalTitle = ({ children }) => {
-  return /* @__PURE__ */ React.createElement("h2", { className: "font-medium flex items-center" }, children);
+  return /* @__PURE__ */ React.createElement("h2", { className: "text-black font-sans font-medium text-base m-0 block truncate flex items-center" }, children);
 };
 const FullscreenModal = ({ className = "", style = {}, ...props }) => /* @__PURE__ */ React__default.createElement(
   "div",
@@ -44039,10 +44039,18 @@ const BranchSwitcherOpenedEvent = "branch-switcher-opened";
 const BranchSwitcherSearchEvent = "branch-switcher-search";
 const BranchSwitcherDropDownEvent = "branch-switcher-dropdown";
 const BranchSwitcherPRClickedEvent = "branch-switcher-pr-clicked";
+const SavedContentEvent = "saved-content";
+const SaveContentErrorEvent = "save-content-error";
+const FormResetEvent = "form-reset";
+const MediaManagerContentUploadedEvent = "media-manager-content-uploaded";
+const MediaManagerContentDeletedEvent = "media-manager-content-deleted";
+const RichTextEditorSwitchedEvent = "rich-text-editor-switched";
+const EventLogPageViewedEvent = "event-log-page-viewed";
 const TinaCMSStartedEvent = "tina-cms-started";
 const CollectionListPageItemClickedEvent = "collection-list-page-item-clicked";
 const CollectionListPageSortEvent = "collection-list-page-sort";
 const CollectionListPageSearchEvent = "collection-list-page-search";
+const CloudConfigNavComponentClickedEvent = "cloud-config-nav-component-clicked";
 const IndexStatus$1 = ({ indexingStatus }) => {
   const styles = {
     complete: {
@@ -45864,17 +45872,22 @@ function dirname(path3) {
 const BreadcrumbButton = ({ className = "", ...props }) => /* @__PURE__ */ React__default.createElement(
   "button",
   {
-    className: "capitalize transition-colors duration-150 border-0 bg-transparent hover:text-blue-500 " + className,
+    className: cn(
+      "capitalize transition-colors duration-150 border-0 bg-transparent hover:text-blue-500",
+      className
+    ),
     ...props
   }
 );
+const BreadcrumbItem$1 = ({ className = "", ...props }) => /* @__PURE__ */ React__default.createElement("span", { className: cn("capitalize", className), ...props });
 function Breadcrumb$2({ directory = "", setDirectory }) {
-  directory = directory.replace(/^\/|\/$/g, "");
-  let prevDir = dirname(directory) || "";
+  const normalizedDir = directory && !directory.startsWith("/") ? "/" + directory : directory;
+  const directoryParts = normalizedDir.split("/");
+  let prevDir = dirname(normalizedDir) || "";
   if (prevDir === ".") {
     prevDir = "";
   }
-  return /* @__PURE__ */ React__default.createElement("div", { className: "w-full flex items-center text-[16px] text-gray-300" }, directory !== "" && /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement("div", { className: "w-full flex items-center text-[16px] text-gray-300" }, directoryParts.length > 1 && /* @__PURE__ */ React__default.createElement(
     IconButton,
     {
       variant: "ghost",
@@ -45887,26 +45900,22 @@ function Breadcrumb$2({ directory = "", setDirectory }) {
         className: `w-7 h-auto fill-gray-300 hover:fill-gray-900 transition duration-150 ease-out`
       }
     )
-  ), /* @__PURE__ */ React__default.createElement(
-    BreadcrumbButton,
-    {
-      onClick: () => setDirectory(""),
-      className: directory === "" ? "text-gray-500 font-bold" : "text-gray-300 font-medium after:pl-1.5 after:content-['/']"
-    },
-    "Media"
-  ), directory && directory.split("/").map((part, index, parts) => {
-    const currentDir = parts.slice(0, index + 1).join("/");
-    return /* @__PURE__ */ React__default.createElement(
+  ), directoryParts.map((part, index) => {
+    return directoryParts.length === index + 1 ? /* @__PURE__ */ React__default.createElement(
+      BreadcrumbItem$1,
+      {
+        key: index,
+        className: "pl-1.5 font-bold text-gray-500"
+      },
+      part === "" ? "Media" : part
+    ) : /* @__PURE__ */ React__default.createElement(Fragment, { key: index }, /* @__PURE__ */ React__default.createElement(
       BreadcrumbButton,
       {
-        className: "pl-1.5 " + (index + 1 === parts.length ? "text-gray-500 font-bold" : "text-gray-300 font-medium after:pl-1.5 after:content-['/']"),
-        key: currentDir,
-        onClick: () => {
-          setDirectory(currentDir);
-        }
+        onClick: () => setDirectory(directoryParts.slice(0, index + 1).join("/")),
+        className: "pl-1.5 text-gray-300"
       },
-      part
-    );
+      part === "" ? "Media" : part
+    ), /* @__PURE__ */ React__default.createElement("span", { className: "pl-1.5 text-gray-300" }, "/"));
   }));
 }
 const CopyField = ({ label, description, value }) => {
@@ -46244,7 +46253,10 @@ function MediaPicker({
   let deleteMediaItem;
   if (allowDelete) {
     deleteMediaItem = async (item) => {
+      var _a3;
       await cms.media.delete(item);
+      const ext = ((_a3 = item.filename.split(".").pop()) == null ? void 0 : _a3.toLowerCase()) || "unknown";
+      captureEvent(MediaManagerContentDeletedEvent, { fileType: ext });
     };
   }
   let selectMediaItem;
@@ -46302,6 +46314,19 @@ function MediaPicker({
           });
         }
         if (mediaItems.length !== 0) {
+          const extensions = [
+            ...new Set(
+              mediaItems.map((item) => {
+                var _a3;
+                const ext = (_a3 = item.filename.split(".").pop()) == null ? void 0 : _a3.toLowerCase();
+                return ext || "unknown";
+              })
+            )
+          ];
+          captureEvent(MediaManagerContentUploadedEvent, {
+            fileType: extensions.join(","),
+            fileCount: mediaItems.length
+          });
           setActiveItem(mediaItems[0]);
           setList((mediaList) => {
             return {
@@ -46974,13 +46999,12 @@ const NavProvider = ({
 const name = "tinacms";
 const type = "module";
 const typings = "dist/index.d.ts";
-const version$1 = "3.6.0";
+const version$1 = "3.6.2";
 const main = "dist/index.js";
 const module = "./dist/index.js";
 const exports = {
   ".": "./dist/index.js",
   "./dist/client": "./dist/client.js",
-  "./dist/edit-state": "./dist/edit-state.js",
   "./react": "./dist/react.js",
   "./dist/react": "./dist/react.js",
   "./dist/rich-text": "./dist/rich-text/index.js",
@@ -47330,7 +47354,19 @@ const SyncStatusButton = ({
   if ((_b = (_a2 = cms.api) == null ? void 0 : _a2.tina) == null ? void 0 : _b.isCustomContentApi) {
     return null;
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("button", { onClick: () => setEventsOpen(true), ...buttonProps }, syncStatus.state !== "error" ? /* @__PURE__ */ React.createElement(TbLogs, { className: "w-6 h-auto mr-2" }) : /* @__PURE__ */ React.createElement(MdSyncProblem, { className: "w-6 h-auto mr-2 text-red-400" }), " ", "Event Log"));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      onClick: () => {
+        setEventsOpen(true);
+        captureEvent(EventLogPageViewedEvent, {});
+      },
+      ...buttonProps
+    },
+    syncStatus.state !== "error" ? /* @__PURE__ */ React.createElement(TbLogs, { className: "w-6 h-auto mr-2" }) : /* @__PURE__ */ React.createElement(MdSyncProblem, { className: "w-6 h-auto mr-2 text-red-400" }),
+    " ",
+    "Event Log"
+  ));
 };
 const Nav = ({
   isLocalMode,
@@ -47529,12 +47565,25 @@ const NavCloudLink = ({ config }) => {
       {
         target: "_blank",
         className: "ml-1 text-blue-600 hover:opacity-60",
+        onClick: () => captureEvent(CloudConfigNavComponentClickedEvent, {
+          itemType: config.link.text
+        }),
         href: config.link.href
       },
       config.link.text
     ));
   }
-  return /* @__PURE__ */ React__default.createElement("span", { className: "text-base tracking-wide text-gray-500 hover:text-blue-600 flex items-center opacity-90 hover:opacity-100" }, /* @__PURE__ */ React__default.createElement(config.Icon, { className: "mr-2 h-6 opacity-80 w-auto" }), /* @__PURE__ */ React__default.createElement("a", { target: "_blank", href: config.link.href }, config.link.text));
+  return /* @__PURE__ */ React__default.createElement("span", { className: "text-base tracking-wide text-gray-500 hover:text-blue-600 flex items-center opacity-90 hover:opacity-100" }, /* @__PURE__ */ React__default.createElement(config.Icon, { className: "mr-2 h-6 opacity-80 w-auto" }), /* @__PURE__ */ React__default.createElement(
+    "a",
+    {
+      target: "_blank",
+      href: config.link.href,
+      onClick: () => captureEvent(CloudConfigNavComponentClickedEvent, {
+        itemType: config.link.text
+      })
+    },
+    config.link.text
+  ));
 };
 const ResizeHandle = () => {
   const {
@@ -49159,7 +49208,7 @@ function Alerts2({ alerts }) {
       /* @__PURE__ */ React__default.createElement(MdError, { className: "mr-1 w-6 h-auto fill-current inline-block text-red-600" }),
       " ",
       "Error"
-    ), /* @__PURE__ */ React__default.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React__default.createElement("div", { className: "tina-prose" }, /* @__PURE__ */ React__default.createElement(AlertMessage, null))), /* @__PURE__ */ React__default.createElement(ModalActions, null, /* @__PURE__ */ React__default.createElement("div", { className: "flex-1" }), /* @__PURE__ */ React__default.createElement(
+    ), /* @__PURE__ */ React__default.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React__default.createElement("div", { className: "tina-prose whitespace-pre-wrap" }, /* @__PURE__ */ React__default.createElement(AlertMessage, null))), /* @__PURE__ */ React__default.createElement(ModalActions, null, /* @__PURE__ */ React__default.createElement("div", { className: "flex-1" }), /* @__PURE__ */ React__default.createElement(
       Button$2,
       {
         style: { flexGrow: 1 },
@@ -65404,7 +65453,18 @@ const FormBuilder = ({
       const canSubmit = !pristine && !submitting && !hasValidationErrors && !(invalid && !dirtySinceLastSubmit);
       const safeSubmit = async () => {
         if (canSubmit) {
-          await handleSubmit();
+          const result = await handleSubmit();
+          if (result && result[FORM_ERROR]) {
+            const error2 = result[FORM_ERROR];
+            captureEvent(SaveContentErrorEvent, {
+              documentPath: tinaForm.path,
+              error: error2 instanceof Error ? error2.message : String(error2)
+            });
+          } else {
+            captureEvent(SavedContentEvent, {
+              documentPath: tinaForm.path
+            });
+          }
         }
       };
       const safeHandleSubmit = async () => {
@@ -65437,6 +65497,7 @@ const FormBuilder = ({
           reset: async () => {
             finalForm.reset();
             await tinaForm.reset();
+            captureEvent(FormResetEvent);
           }
         },
         tinaForm.buttons.reset
@@ -67207,6 +67268,7 @@ const useRawMarkdownToolbarButton = () => {
   const { setRawMode } = useEditorContext();
   const onMouseDown = (e3) => {
     setRawMode(true);
+    captureEvent(RichTextEditorSwitchedEvent, { to: "markdown" });
   };
   return {
     props: {
@@ -119785,8 +119847,10 @@ const RichEditor = ({ input, tinaForm, field }) => {
       return [{ type: "p", children: [{ type: "text", text: "" }] }];
     }
   }, []);
+  const showFloatingToolbar = ((_a2 = field == null ? void 0 : field.overrides) == null ? void 0 : _a2.showFloatingToolbar) !== false;
+  const plugins2 = showFloatingToolbar ? editorPlugins : editorPlugins.filter((plugin) => plugin.key !== "floating-toolbar");
   const editor = useCreateEditor({
-    plugins: [...editorPlugins],
+    plugins: [...plugins2],
     value: initialValue,
     components: Components()
   });
@@ -119826,8 +119890,7 @@ const RichEditor = ({ input, tinaForm, field }) => {
         templates: field.templates,
         overrides: (field == null ? void 0 : field.toolbarOverride) ? field.toolbarOverride : field.overrides
       },
-      /* @__PURE__ */ React__default.createElement(FixedToolbar, null, /* @__PURE__ */ React__default.createElement(FixedToolbarButtons, null)),
-      ((_a2 = field == null ? void 0 : field.overrides) == null ? void 0 : _a2.showFloatingToolbar) !== false ? /* @__PURE__ */ React__default.createElement(FloatingToolbar, null, /* @__PURE__ */ React__default.createElement(FloatingToolbarButtons, null)) : null
+      /* @__PURE__ */ React__default.createElement(FixedToolbar, null, /* @__PURE__ */ React__default.createElement(FixedToolbarButtons, null))
     ), /* @__PURE__ */ React__default.createElement(Editor$1, null)))
   ));
 };
@@ -119965,8 +120028,14 @@ function popupWindow(url, title, window2, w2, h) {
 }
 const TINA_LOGIN_EVENT = "tinaCloudLogin";
 const AUTH_TOKEN_KEY = "tinacms-auth";
+class AuthenticationCancelledError extends Error {
+  constructor(message = "Authentication cancelled") {
+    super(message);
+    this.name = "AuthenticationCancelledError";
+  }
+}
 const authenticate = (clientId, frontendUrl) => {
-  return new Promise((resolve) => {
+  return new Promise((resolve, reject) => {
     const origin = `${window.location.protocol}//${window.location.host}`;
     const authTab = popupWindow(
       `${frontendUrl}/signin?clientId=${clientId}&origin=${origin}`,
@@ -119975,8 +120044,18 @@ const authenticate = (clientId, frontendUrl) => {
       1e3,
       700
     );
-    window.addEventListener("message", function(e3) {
+    if (!authTab) {
+      reject(
+        new Error(
+          "Popup was blocked by browser. Please allow popups for this site."
+        )
+      );
+      return;
+    }
+    const messageHandler = (e3) => {
       if (e3.data.source === TINA_LOGIN_EVENT) {
+        clearInterval(pollInterval);
+        window.removeEventListener("message", messageHandler);
         if (authTab) {
           authTab.close();
         }
@@ -119986,7 +120065,15 @@ const authenticate = (clientId, frontendUrl) => {
           refresh_token: e3.data.refresh_token
         });
       }
-    });
+    };
+    const pollInterval = setInterval(() => {
+      if (authTab.closed) {
+        clearInterval(pollInterval);
+        window.removeEventListener("message", messageHandler);
+        reject(new AuthenticationCancelledError("Popup was closed"));
+      }
+    }, 500);
+    window.addEventListener("message", messageHandler);
   });
 };
 const DefaultSessionProvider = ({
@@ -121010,6 +121097,9 @@ const AuthWallInner = ({
       }
       return onAuthenticated();
     } catch (e3) {
+      if (e3 instanceof AuthenticationCancelledError || (e3 == null ? void 0 : e3.name) === "AuthenticationCancelledError") {
+        return;
+      }
       console.error(e3);
       setActiveModal("error");
       setErrorMessage({
@@ -123973,18 +124063,24 @@ const CheckSchema = ({
     if (schemaJson && cms) {
       api.checkGraphqlSchema({
         localSchema: schemaJson
-      }).then((x) => {
-        if (x === false) {
+      }).then((isSchemaMatchedToCloud) => {
+        if (isSchemaMatchedToCloud === false) {
           cms.alerts.error(
-            "GraphQL Schema Mismatch. Editing may not work. If you just switched branches, try going back to the previous branch"
+            `GraphQL Schema Mismatch - Editing may not work. 
+              
+              If you just switched branches, try going back to the previous branch.
+              
+              If you just pushed changes to the branch, try pulling the latest changes.
+              
+              For more information, please see https://tina.io/docs/tinacloud/troubleshooting`
           );
         }
-      }).catch((e3) => {
-        if (e3.message.includes("has not been indexed by TinaCloud")) {
+      }).catch((error2) => {
+        if (error2.message.includes("has not been indexed by TinaCloud")) {
           setSchemaMissingError(true);
         } else {
-          cms.alerts.error(`Unexpected error checking schema: ${e3}`);
-          throw e3;
+          cms.alerts.error(`Unexpected error checking schema: ${error2}`);
+          throw error2;
         }
       });
     }

package/dist/lib/posthog/posthog.d.ts

@@ -16,17 +16,28 @@ export type BranchSwitcherPRClickedPayload = {
 };
 export declare const SavedContentEvent: string;
 export type SavedContentPayload = {
-    collection?: string;
     documentPath?: string;
 };
+export declare const SaveContentErrorEvent: string;
+export type SaveContentErrorPayload = {
+    documentPath?: string;
+    error?: string;
+};
+export declare const FormResetEvent: string;
 export declare const MediaManagerContentUploadedEvent: string;
-export type MediaManagerContentUploadedPayload = Record<string, never>;
+export type MediaManagerContentUploadedPayload = {
+    fileType: string;
+    fileCount: number;
+};
 export declare const MediaManagerContentDeletedEvent: string;
-export type MediaManagerContentDeletedPayload = Record<string, never>;
+export type MediaManagerContentDeletedPayload = {
+    fileType: string;
+};
 export declare const RichTextEditorSwitchedEvent: string;
 export type RichTextEditorSwitchedPayload = {
     to: 'markdown' | 'richtext';
 };
+export declare const EventLogPageViewedEvent: string;
 export declare const ProjectConfigNavigatedToFromWebsiteEvent: string;
 export type ProjectConfigNavigatedToFromWebsitePayload = Record<string, never>;
 export declare const UserManagementNavigatedToFromWebsiteEvent: string;
@@ -51,4 +62,7 @@ export declare const CollectionListPageSearchEvent: string;
 export type CollectionListPageSearchPayload = {
     searchQuery: string;
 };
-export declare const EventLogPageViewedEvent: string;
+export declare const CloudConfigNavComponentClickedEvent: string;
+export type CloudConfigNavComponentClickedPayload = {
+    itemType: 'Project Config' | 'User Management' | 'Support';
+};

package/package.json

@@ -2,13 +2,12 @@
   "name": "tinacms",
   "type": "module",
   "typings": "dist/index.d.ts",
-  "version": "3.6.0",
+  "version": "3.6.2",
   "main": "dist/index.js",
   "module": "./dist/index.js",
   "exports": {
     ".": "./dist/index.js",
     "./dist/client": "./dist/client.js",
-    "./dist/edit-state": "./dist/edit-state.js",
     "./react": "./dist/react.js",
     "./dist/react": "./dist/react.js",
     "./dist/rich-text": "./dist/rich-text/index.js",
@@ -112,9 +111,9 @@
     "webfontloader": "1.6.28",
     "yup": "^1.6.1",
     "zod": "^3.24.2",
+    "@tinacms/schema-tools": "2.7.0",
     "@tinacms/mdx": "2.0.7",
-    "@tinacms/search": "1.2.5",
-    "@tinacms/schema-tools": "2.7.0"
+    "@tinacms/search": "1.2.6"
   },
   "devDependencies": {
     "@graphql-tools/utils": "^10.8.1",