tinacms 3.7.3 → 3.7.4

package/dist/index.js

@@ -33939,8 +33939,12 @@ const MermaidElementWithRef = ({ config }) => {
   const mermaidRef = useRef(null);
   useEffect(() => {
     if (mermaidRef.current) {
-      mermaid.initialize({ startOnLoad: true });
-      mermaid.init();
+      const renderMermaid = async () => {
+        await mermaid.run({
+          nodes: [mermaidRef.current.querySelector(".mermaid")]
+        });
+      };
+      renderMermaid();
     }
   }, [config]);
   return /* @__PURE__ */ React__default.createElement("div", { contentEditable: false, className: "border-border border-b pt-10" }, /* @__PURE__ */ React__default.createElement("div", { ref: mermaidRef }, /* @__PURE__ */ React__default.createElement("pre", { className: "mermaid not-tina-prose" }, config)));
@@ -33973,15 +33977,28 @@ const CodeBlockElement = withRef$1(
       if (element.lang !== "mermaid") {
         return;
       }
-      if (mermaid.parse(codeLineToString(element))) {
-        setCodeBlockError(null);
-      }
-    }, [element.children]);
-    mermaid.parseError = (err) => {
-      setCodeBlockError(
-        String(err.message) || "An error occurred while parsing the diagram."
-      );
-    };
+      let isCancelled = false;
+      const validateMermaid = async () => {
+        try {
+          await mermaid.parse(
+            codeLineToString(element)
+          );
+          if (!isCancelled) {
+            setCodeBlockError(null);
+          }
+        } catch (err) {
+          if (!isCancelled) {
+            setCodeBlockError(
+              String(err.message) || "An error occurred while parsing the diagram."
+            );
+          }
+        }
+      };
+      validateMermaid();
+      return () => {
+        isCancelled = true;
+      };
+    }, [element.children, element.lang]);
     return /* @__PURE__ */ React__default.createElement(
       PlateElement,
       {
@@ -38289,29 +38306,27 @@ class Form {
           const templateName = namePath.slice(0, currentPathIndex + 2).join(".");
           if ((item == null ? void 0 : item.type) === "img") {
             const imageName = namePath.slice(0, currentPathIndex + 2).join(".");
+            const imageBaseName = templateName.replace(/\.props$/, "");
             return {
-              ...formOrObjectField,
-              // name: [formOrObjectField.name, 'img'].join('.'),
+              label: "Image",
               name: [imageName].join("."),
               fields: [
                 {
                   type: "image",
-                  // label: 'URL',
-                  name: [templateName, "url"].join("."),
+                  label: "URL",
+                  name: [imageBaseName, "url"].join("."),
                   component: "image"
                 },
                 {
                   type: "string",
                   label: "Alt",
-                  name: [templateName.replace(/\.props$/, ""), "alt"].join("."),
+                  name: [imageBaseName, "alt"].join("."),
                   component: "text"
                 },
                 {
                   type: "string",
                   label: "Caption",
-                  name: [templateName.replace(/\.props$/, ""), "caption"].join(
-                    "."
-                  ),
+                  name: [imageBaseName, "caption"].join("."),
                   component: "text"
                 }
               ]
@@ -40220,19 +40235,19 @@ const RadioOption = ({ checked, htmlFor, children, ...props }) => /* @__PURE__ *
   /* @__PURE__ */ React.createElement(
     "span",
     {
-      className: `relative h-[19px] w-[19px] rounded border text-indigo-600 focus:ring-indigo-500 transition ease-out duration-150 ${checked ? "border-blue-500 bg-blue-500 shadow-sm group-hover:bg-blue-400 group-hover:border-blue-400" : "border-gray-200 bg-white shadow-inner group-hover:bg-gray-100"}`
+      className: `relative flex h-[19px] w-[19px] items-center justify-center rounded-full border transition ease-out duration-150 ${checked ? "border-blue-500 bg-white shadow-sm group-hover:border-blue-400" : "border-gray-300 bg-white group-hover:border-blue-300"}`
     },
     /* @__PURE__ */ React.createElement(
-      BiCheck,
+      "span",
       {
-        className: `absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[17px] h-[17px] transition ease-out duration-150 ${checked ? "opacity-100 text-white group-hover:opacity-80" : "text-blue-500 opacity-0 grou-hover:opacity-30"}`
+        className: `h-[9px] w-[9px] rounded-full bg-blue-500 transition ease-out duration-150 ${checked ? "scale-100 opacity-100 group-hover:bg-blue-400" : "scale-75 opacity-0"}`
       }
     )
   ),
   /* @__PURE__ */ React.createElement(
     "span",
     {
-      className: `relative transition ease-out duration-150 ${checked ? "text-gray-800 opacity-100" : "text-gray-700 opacity-70 group-hover:opacity-100"}`
+      className: `relative transition ease-out duration-150 ${checked ? "text-gray-800 opacity-100" : "text-gray-700 opacity-100 group-hover:text-gray-800"}`
     },
     children
   )
@@ -48025,7 +48040,7 @@ const NavProvider = ({
 const name = "tinacms";
 const type = "module";
 const typings = "dist/index.d.ts";
-const version$1 = "3.7.3";
+const version$1 = "3.7.4";
 const main = "dist/index.js";
 const module = "./dist/index.js";
 const exports = {
@@ -48125,7 +48140,7 @@ const dependencies = {
   "graphql-tag": "catalog:",
   "is-hotkey": "catalog:",
   "lucide-react": "catalog:",
-  mermaid: "9.3.0",
+  mermaid: "^11.12.2",
   moment: "catalog:",
   "moment-timezone": "^0.6.0",
   "monaco-editor": "catalog:",
@@ -66292,7 +66307,7 @@ const WorkflowProgressIndicator = ({
     "a",
     {
       className: "underline text-tina-orange-dark font-medium text-xs",
-      href: "https://tina.io/docs/tinacloud/editorial-workflow",
+      href: "https://tina.io/docs/r/editorial-workflow",
       target: "_blank"
     },
     "Learn more about Editorial Workflow"
@@ -66392,7 +66407,7 @@ const CreateBranchModal = ({
         "a",
         {
           className: "underline text-tina-orange-dark font-medium",
-          href: "https://tina.io/docs/tinacloud/editorial-workflow",
+          href: "https://tina.io/docs/r/editorial-workflow",
           target: "_blank"
         },
         "Editorial Workflow"
@@ -125383,6 +125398,16 @@ const ScreenPage = () => {
     } })));
   });
 };
+const TROUBLESHOOTING_URL = "https://tina.io/docs/tinacloud/troubleshooting";
+const ErrorModalContent = (props) => {
+  const { title, message } = props;
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", null, title), /* @__PURE__ */ React__default.createElement("p", null, message), /* @__PURE__ */ React__default.createElement("a", { href: TROUBLESHOOTING_URL, target: "_blank", rel: "noopener noreferrer" }, "Learn more"));
+};
+const showErrorModal = (title, message, cms) => {
+  if (cms.alerts.all.some((a2) => a2.level === "error"))
+    return;
+  cms.alerts.error(() => /* @__PURE__ */ React__default.createElement(ErrorModalContent, { title, message }));
+};
 const getBackendType = (client) => {
   var _a2, _b, _c;
   if (!client)
@@ -125501,21 +125526,22 @@ const CheckSchema = ({
         localSchema: schemaJson
       }).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.
-              
-              If you just pushed changes to the branch, try pulling the latest changes.
-              
-              For more information, please see https://tina.io/docs/tinacloud/troubleshooting`
+          showErrorModal(
+            "GraphQL Schema Mismatch",
+            "Editing may not work. If you just switched branches, try going back to the previous branch. If you just pushed changes, try pulling the latest.",
+            cms
           );
         }
       }).catch((error2) => {
         if (error2.message.includes("has not been indexed by TinaCloud")) {
           setSchemaMissingError(true);
         } else {
-          cms.alerts.error(`Unexpected error checking schema: ${error2}`);
+          console.error("Unexpected error checking schema:", error2);
+          showErrorModal(
+            "Unexpected Error",
+            "An unexpected error occurred while validating your Tina schema. If after refreshing the issue persists, reach out to us on Discord.",
+            cms
+          );
           throw error2;
         }
       });

package/package.json

@@ -2,7 +2,7 @@
   "name": "tinacms",
   "type": "module",
   "typings": "dist/index.d.ts",
-  "version": "3.7.3",
+  "version": "3.7.4",
   "main": "dist/index.js",
   "module": "./dist/index.js",
   "exports": {
@@ -93,7 +93,7 @@
     "graphql-tag": "^2.12.6",
     "is-hotkey": "^0.2.0",
     "lucide-react": "^0.424.0",
-    "mermaid": "9.3.0",
+    "mermaid": "^11.12.2",
     "moment": "2.29.4",
     "moment-timezone": "^0.6.0",
     "monaco-editor": "0.31.0",
@@ -114,9 +114,9 @@
     "webfontloader": "1.6.28",
     "yup": "^1.6.1",
     "zod": "^3.24.2",
+    "@tinacms/mdx": "2.1.2",
     "@tinacms/schema-tools": "2.7.2",
-    "@tinacms/search": "1.2.10",
-    "@tinacms/mdx": "2.1.2"
+    "@tinacms/search": "1.2.11"
   },
   "devDependencies": {
     "@graphql-tools/utils": "^10.8.1",