tinacms 1.5.26 → 1.5.27

package/dist/auth/TinaCloudProvider.d.ts

@@ -8,7 +8,6 @@ export interface TinaCloudMediaStoreClass {
 export interface TinaCloudAuthWallProps {
     cms?: TinaCMS;
     children: React.ReactNode;
-    loginScreen?: React.ReactNode;
     tinaioConfig?: TinaIOConfig;
     getModalActions?: (args: {
         closeModal: () => void;
@@ -19,7 +18,7 @@ export interface TinaCloudAuthWallProps {
     }[];
     mediaStore?: TinaCloudMediaStoreClass | (() => Promise<TinaCloudMediaStoreClass>);
 }
-export declare const AuthWallInner: ({ children, cms, loginScreen, getModalActions, }: TinaCloudAuthWallProps) => JSX.Element;
+export declare const AuthWallInner: ({ children, cms, getModalActions, }: TinaCloudAuthWallProps) => JSX.Element;
 /**
  * Provides the ability to setup your CMS and media while also providing an authentication wall so Tina is not enabled without a valid user session.
  *

package/dist/index.d.ts

@@ -20,6 +20,7 @@ export default TinaCMSProvider2;
 import { MediaStore, TinaCMS } from '@tinacms/toolkit';
 import { formifyCallback } from './hooks/use-graphql-forms';
 export { NAMER, resolveField } from '@tinacms/schema-tools';
+export type { LoginScreenProps, LoginStrategy } from '@tinacms/schema-tools';
 import { TinaSchema, TinaField, Config, Schema, Collection, Template } from '@tinacms/schema-tools';
 export type { Config, Schema, Collection, Template, TinaField, TinaSchema };
 /**

package/dist/index.js

@@ -3062,6 +3062,9 @@ var __publicField = (obj, key, value) => {
   function MdSyncProblem(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0z" } }, { "tag": "path", "attr": { "d": "M3 12c0 2.21.91 4.2 2.36 5.64L3 20h6v-6l-2.24 2.24A6.003 6.003 0 015 12a5.99 5.99 0 014-5.65V4.26C5.55 5.15 3 8.27 3 12zm8 5h2v-2h-2v2zM21 4h-6v6l2.24-2.24A6.003 6.003 0 0119 12a5.99 5.99 0 01-4 5.65v2.09c3.45-.89 6-4.01 6-7.74 0-2.21-.91-4.2-2.36-5.64L21 4zm-10 9h2V7h-2v6z" } }] })(props);
   }
+  function MdOutlineHelpOutline(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" } }, { "tag": "path", "attr": { "d": "M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z" } }] })(props);
+  }
   function MdOutlineSettings(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" } }, { "tag": "path", "attr": { "d": "M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46a.5.5 0 00-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65A.488.488 0 0014 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1a.566.566 0 00-.18-.03c-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46a.5.5 0 00.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.06.02.12.03.18.03.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zm-1.98-1.71c.04.31.05.52.05.73 0 .21-.02.43-.05.73l-.14 1.13.89.7 1.08.84-.7 1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2 1.35h-1.4l-.19-1.35-.16-1.13-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21 1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21 1.27.51 1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19 1.35.16 1.13 1.06.43c.43.18.83.41 1.23.71l.91.7 1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7.14 1.13zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" } }] })(props);
   }
@@ -3083,6 +3086,9 @@ var __publicField = (obj, key, value) => {
   function MdOutlineArrowBack(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" } }, { "tag": "path", "attr": { "d": "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" } }] })(props);
   }
+  function MdOutlinePerson(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" } }, { "tag": "path", "attr": { "d": "M12 6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0 10c2.7 0 5.8 1.29 6 2H6c.23-.72 3.31-2 6-2m0-12C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 10c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" } }] })(props);
+  }
   const BranchContext = React__namespace.createContext({
     currentBranch: null,
     setCurrentBranch: (branch) => {
@@ -8865,6 +8871,9 @@ var __publicField = (obj, key, value) => {
                   await ((_d = cms.api.tina) == null ? void 0 : _d.authProvider.logout());
                   if ((_f = (_e = cms == null ? void 0 : cms.api) == null ? void 0 : _e.tina) == null ? void 0 : _f.onLogout) {
                     await ((_h = (_g = cms == null ? void 0 : cms.api) == null ? void 0 : _g.tina) == null ? void 0 : _h.onLogout());
+                    await new Promise(
+                      (resolve) => setTimeout(resolve, 500)
+                    );
                   }
                   window.location.href = new URL(
                     window.location.href
@@ -10305,6 +10314,7 @@ var __publicField = (obj, key, value) => {
         (_a = client == null ? void 0 : client.authProvider) == null ? void 0 : _a.logout().then(async () => {
           if (typeof (client == null ? void 0 : client.onLogout) === "function") {
             await client.onLogout();
+            await new Promise((resolve) => setTimeout(resolve, 500));
           }
           window.location.href = new URL(window.location.href).pathname;
         }).catch((e) => console.error(e));
@@ -10448,7 +10458,18 @@ var __publicField = (obj, key, value) => {
               link: {
                 text: "User Management",
                 href: `https://app.tina.io/projects/${clientId}/collaborators`
-              }
+              },
+              Icon: MdOutlinePerson
+            })
+          );
+          this.plugins.add(
+            createCloudConfig({
+              name: "Support",
+              link: {
+                text: "Support",
+                href: `https:/tina.io/docs/support`
+              },
+              Icon: MdOutlineHelpOutline
             })
           );
         } else if (!isSelfHosted) {
@@ -11407,6 +11428,7 @@ var __publicField = (obj, key, value) => {
     const form = React.useMemo(() => {
       return new Form({
         ...props,
+        relativePath: props.id,
         id,
         onChange: ({ values }) => {
           props.onChange(values);
@@ -12330,7 +12352,7 @@ var __publicField = (obj, key, value) => {
     return /* @__PURE__ */ React.createElement(
       NestedForm,
       {
-        id: "link-form",
+        id: props.id,
         label: "Link",
         fields: [
           { label: "URL", name: "url", component: "text" },
@@ -12371,7 +12393,8 @@ var __publicField = (obj, key, value) => {
     icon,
     options,
     name,
-    isLastItem = false
+    isLastItem = false,
+    tinaForm
   }) => {
     const editor = plateHeadless.useEditorState();
     const [selection, setSelection] = React.useState(null);
@@ -12460,6 +12483,7 @@ var __publicField = (obj, key, value) => {
       ), isExpanded && /* @__PURE__ */ React.createElement(
         LinkForm,
         {
+          id: tinaForm.id,
           selection,
           onClose: () => {
             setIsExpanded(false);
@@ -12685,7 +12709,8 @@ var __publicField = (obj, key, value) => {
   const ICON_WIDTH = 40;
   const EMBED_ICON_WIDTH = 85;
   function Toolbar({
-    templates
+    templates,
+    tinaForm
   }) {
     const { setRawMode } = useEditorContext();
     const showEmbed = templates.length > 0;
@@ -12702,6 +12727,7 @@ var __publicField = (obj, key, value) => {
     const isImgActive = helpers.isNodeActive(editor, ELEMENT_IMG);
     const toolbarItems = [
       {
+        tinaForm,
         name: "heading",
         label: "Heading",
         active: false,
@@ -12722,16 +12748,19 @@ var __publicField = (obj, key, value) => {
         ))
       },
       {
+        tinaForm,
         name: "link",
         label: "Link",
         active: isLinkActive2
       },
       {
+        tinaForm,
         name: "image",
         label: "Image",
         active: isImgActive
       },
       {
+        tinaForm,
         name: "quote",
         label: "Quote",
         active: blockQuoteActive,
@@ -12742,6 +12771,7 @@ var __publicField = (obj, key, value) => {
         }
       },
       {
+        tinaForm,
         name: "ul",
         label: "Bullet List",
         active: ulActive,
@@ -12752,6 +12782,7 @@ var __publicField = (obj, key, value) => {
         }
       },
       {
+        tinaForm,
         name: "ol",
         label: "List",
         active: olActive,
@@ -12762,6 +12793,7 @@ var __publicField = (obj, key, value) => {
         }
       },
       {
+        tinaForm,
         name: "code",
         label: "Code",
         active: isCodeActive,
@@ -12772,6 +12804,7 @@ var __publicField = (obj, key, value) => {
         }
       },
       {
+        tinaForm,
         name: "codeBlock",
         label: "Code Block",
         active: codeBlockActive,
@@ -12782,6 +12815,7 @@ var __publicField = (obj, key, value) => {
         }
       },
       {
+        tinaForm,
         name: "bold",
         label: "Bold",
         active: isBoldActive,
@@ -12792,6 +12826,7 @@ var __publicField = (obj, key, value) => {
         }
       },
       {
+        tinaForm,
         name: "italic",
         label: "Italic",
         active: isItalicActive,
@@ -12802,6 +12837,7 @@ var __publicField = (obj, key, value) => {
         }
       },
       {
+        tinaForm,
         name: "raw",
         label: "Raw",
         active: false,
@@ -12859,6 +12895,7 @@ var __publicField = (obj, key, value) => {
                 return /* @__PURE__ */ React__namespace.createElement(
                   ToolbarItem,
                   {
+                    tinaForm,
                     key: toolbarItem.name,
                     name: toolbarItem.name,
                     hidden,
@@ -12875,6 +12912,7 @@ var __publicField = (obj, key, value) => {
               return /* @__PURE__ */ React__namespace.createElement(
                 ToolbarItem,
                 {
+                  tinaForm,
                   key: toolbarItem.name,
                   name: toolbarItem.name,
                   hidden,
@@ -13004,7 +13042,14 @@ var __publicField = (obj, key, value) => {
             children: value
           });
         },
-        firstChildren: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Toolbar, { templates: props.field.templates, inlineOnly: false }), /* @__PURE__ */ React.createElement(FloatingLink, null))
+        firstChildren: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+          Toolbar,
+          {
+            tinaForm: props.tinaForm,
+            templates: props.field.templates,
+            inlineOnly: false
+          }
+        ), /* @__PURE__ */ React.createElement(FloatingLink, null))
       }
     ));
   };
@@ -26756,6 +26801,13 @@ var __publicField = (obj, key, value) => {
     getLoginStrategy() {
       return "Redirect";
     }
+    /**
+     * A React component that renders the custom UI for the login screen.
+     * Set the LoginStrategy to LoginScreen when providing this function.
+     */
+    getLoginScreen() {
+      return null;
+    }
     getSessionProvider() {
       return DefaultSessionProvider;
     }
@@ -27787,13 +27839,18 @@ mutation addPendingDocumentMutation(
   const AuthWallInner = ({
     children,
     cms,
-    loginScreen,
     getModalActions
   }) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const client = cms.api.tina;
     const isTinaCloud = !client.isLocalMode && !((_c = (_b = (_a = client.schema) == null ? void 0 : _a.config) == null ? void 0 : _b.config) == null ? void 0 : _c.contentApiUrlOverride);
     const loginStrategy = client.authProvider.getLoginStrategy();
+    const loginScreen = client.authProvider.getLoginScreen();
+    if (loginStrategy === "LoginScreen" && !loginScreen) {
+      throw new Error(
+        "LoginScreen is set as the login strategy but no login screen component was provided"
+      );
+    }
     const [activeModal, setActiveModal] = React.useState(null);
     const [errorMessage, setErrorMessage] = React.useState();
     const [showChildren, setShowChildren] = React.useState(false);
@@ -27855,10 +27912,12 @@ mutation addPendingDocumentMutation(
         setActiveModal(null);
       }
     }) : [];
-    const handleAuthenticate = async () => {
+    const handleAuthenticate = async (loginScreenProps) => {
       try {
         setAuthenticated(false);
-        const token = await client.authProvider.authenticate(authProps);
+        const token = await client.authProvider.authenticate(
+          loginScreenProps || authProps
+        );
         if (typeof (client == null ? void 0 : client.onLogin) === "function") {
           await (client == null ? void 0 : client.onLogin({ token }));
         }
@@ -27972,6 +28031,7 @@ mutation addPendingDocumentMutation(
                 await authProvider.logout();
                 if (typeof (client == null ? void 0 : client.onLogout) === "function") {
                   await client.onLogout();
+                  await new Promise((resolve) => setTimeout(resolve, 500));
                 }
                 window.location.href = new URL(window.location.href).pathname;
               } catch (e) {
@@ -27987,7 +28047,9 @@ mutation addPendingDocumentMutation(
           }
         ]
       }
-    ), showChildren ? children : loginScreen ? loginScreen : null);
+    ), showChildren ? children : ((_d = client.authProvider) == null ? void 0 : _d.getLoginStrategy()) === "LoginScreen" && loginScreen ? loginScreen({
+      handleAuthenticate: async (props) => handleAuthenticate(props)
+    }) : null);
   };
   const TinaCloudProvider = (props) => {
     var _a, _b, _c;
@@ -28895,6 +28957,7 @@ This will work when developing locally but NOT when deployed to production.
         await ((_f = (_e = (_d = cms == null ? void 0 : cms.api) == null ? void 0 : _d.tina) == null ? void 0 : _e.authProvider) == null ? void 0 : _f.logout());
         if ((_h = (_g = cms == null ? void 0 : cms.api) == null ? void 0 : _g.tina) == null ? void 0 : _h.onLogout) {
           await ((_j = (_i = cms == null ? void 0 : cms.api) == null ? void 0 : _i.tina) == null ? void 0 : _j.onLogout());
+          await new Promise((resolve) => setTimeout(resolve, 500));
         }
       }
       setEdit(false);

package/dist/index.mjs

@@ -3070,6 +3070,9 @@ function MdArrowForward(props) {
 function MdSyncProblem(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0z" } }, { "tag": "path", "attr": { "d": "M3 12c0 2.21.91 4.2 2.36 5.64L3 20h6v-6l-2.24 2.24A6.003 6.003 0 015 12a5.99 5.99 0 014-5.65V4.26C5.55 5.15 3 8.27 3 12zm8 5h2v-2h-2v2zM21 4h-6v6l2.24-2.24A6.003 6.003 0 0119 12a5.99 5.99 0 01-4 5.65v2.09c3.45-.89 6-4.01 6-7.74 0-2.21-.91-4.2-2.36-5.64L21 4zm-10 9h2V7h-2v6z" } }] })(props);
 }
+function MdOutlineHelpOutline(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" } }, { "tag": "path", "attr": { "d": "M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z" } }] })(props);
+}
 function MdOutlineSettings(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" } }, { "tag": "path", "attr": { "d": "M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46a.5.5 0 00-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65A.488.488 0 0014 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1a.566.566 0 00-.18-.03c-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46a.5.5 0 00.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.06.02.12.03.18.03.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zm-1.98-1.71c.04.31.05.52.05.73 0 .21-.02.43-.05.73l-.14 1.13.89.7 1.08.84-.7 1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2 1.35h-1.4l-.19-1.35-.16-1.13-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21 1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21 1.27.51 1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19 1.35.16 1.13 1.06.43c.43.18.83.41 1.23.71l.91.7 1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7.14 1.13zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" } }] })(props);
 }
@@ -3091,6 +3094,9 @@ function MdOutlineArrowBackIos(props) {
 function MdOutlineArrowBack(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" } }, { "tag": "path", "attr": { "d": "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" } }] })(props);
 }
+function MdOutlinePerson(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" } }, { "tag": "path", "attr": { "d": "M12 6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0 10c2.7 0 5.8 1.29 6 2H6c.23-.72 3.31-2 6-2m0-12C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 10c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" } }] })(props);
+}
 const BranchContext = React.createContext({
   currentBranch: null,
   setCurrentBranch: (branch) => {
@@ -8873,6 +8879,9 @@ const Nav = ({
                 await ((_d = cms.api.tina) == null ? void 0 : _d.authProvider.logout());
                 if ((_f = (_e = cms == null ? void 0 : cms.api) == null ? void 0 : _e.tina) == null ? void 0 : _f.onLogout) {
                   await ((_h = (_g = cms == null ? void 0 : cms.api) == null ? void 0 : _g.tina) == null ? void 0 : _h.onLogout());
+                  await new Promise(
+                    (resolve) => setTimeout(resolve, 500)
+                  );
                 }
                 window.location.href = new URL(
                   window.location.href
@@ -10313,6 +10322,7 @@ function UpdatePassword(props) {
       (_a = client == null ? void 0 : client.authProvider) == null ? void 0 : _a.logout().then(async () => {
         if (typeof (client == null ? void 0 : client.onLogout) === "function") {
           await client.onLogout();
+          await new Promise((resolve) => setTimeout(resolve, 500));
         }
         window.location.href = new URL(window.location.href).pathname;
       }).catch((e) => console.error(e));
@@ -10456,7 +10466,18 @@ class TinaCMS extends CMS {
             link: {
               text: "User Management",
               href: `https://app.tina.io/projects/${clientId}/collaborators`
-            }
+            },
+            Icon: MdOutlinePerson
+          })
+        );
+        this.plugins.add(
+          createCloudConfig({
+            name: "Support",
+            link: {
+              text: "Support",
+              href: `https:/tina.io/docs/support`
+            },
+            Icon: MdOutlineHelpOutline
           })
         );
       } else if (!isSelfHosted) {
@@ -11415,6 +11436,7 @@ const NestedForm = (props) => {
   const form = React__default.useMemo(() => {
     return new Form({
       ...props,
+      relativePath: props.id,
       id,
       onChange: ({ values }) => {
         props.onChange(values);
@@ -12338,7 +12360,7 @@ const LinkForm = (props) => {
   return /* @__PURE__ */ React__default.createElement(
     NestedForm,
     {
-      id: "link-form",
+      id: props.id,
       label: "Link",
       fields: [
         { label: "URL", name: "url", component: "text" },
@@ -12379,7 +12401,8 @@ const ToolbarItem = ({
   icon,
   options,
   name,
-  isLastItem = false
+  isLastItem = false,
+  tinaForm
 }) => {
   const editor = useEditorState();
   const [selection, setSelection] = React__default.useState(null);
@@ -12468,6 +12491,7 @@ const ToolbarItem = ({
     ), isExpanded && /* @__PURE__ */ React__default.createElement(
       LinkForm,
       {
+        id: tinaForm.id,
         selection,
         onClose: () => {
           setIsExpanded(false);
@@ -12693,7 +12717,8 @@ const headers = [
 const ICON_WIDTH = 40;
 const EMBED_ICON_WIDTH = 85;
 function Toolbar({
-  templates
+  templates,
+  tinaForm
 }) {
   const { setRawMode } = useEditorContext();
   const showEmbed = templates.length > 0;
@@ -12710,6 +12735,7 @@ function Toolbar({
   const isImgActive = helpers.isNodeActive(editor, ELEMENT_IMG);
   const toolbarItems = [
     {
+      tinaForm,
       name: "heading",
       label: "Heading",
       active: false,
@@ -12730,16 +12756,19 @@ function Toolbar({
       ))
     },
     {
+      tinaForm,
       name: "link",
       label: "Link",
       active: isLinkActive2
     },
     {
+      tinaForm,
       name: "image",
       label: "Image",
       active: isImgActive
     },
     {
+      tinaForm,
       name: "quote",
       label: "Quote",
       active: blockQuoteActive,
@@ -12750,6 +12779,7 @@ function Toolbar({
       }
     },
     {
+      tinaForm,
       name: "ul",
       label: "Bullet List",
       active: ulActive,
@@ -12760,6 +12790,7 @@ function Toolbar({
       }
     },
     {
+      tinaForm,
       name: "ol",
       label: "List",
       active: olActive,
@@ -12770,6 +12801,7 @@ function Toolbar({
       }
     },
     {
+      tinaForm,
       name: "code",
       label: "Code",
       active: isCodeActive,
@@ -12780,6 +12812,7 @@ function Toolbar({
       }
     },
     {
+      tinaForm,
       name: "codeBlock",
       label: "Code Block",
       active: codeBlockActive,
@@ -12790,6 +12823,7 @@ function Toolbar({
       }
     },
     {
+      tinaForm,
       name: "bold",
       label: "Bold",
       active: isBoldActive,
@@ -12800,6 +12834,7 @@ function Toolbar({
       }
     },
     {
+      tinaForm,
       name: "italic",
       label: "Italic",
       active: isItalicActive,
@@ -12810,6 +12845,7 @@ function Toolbar({
       }
     },
     {
+      tinaForm,
       name: "raw",
       label: "Raw",
       active: false,
@@ -12867,6 +12903,7 @@ function Toolbar({
               return /* @__PURE__ */ React.createElement(
                 ToolbarItem,
                 {
+                  tinaForm,
                   key: toolbarItem.name,
                   name: toolbarItem.name,
                   hidden,
@@ -12883,6 +12920,7 @@ function Toolbar({
             return /* @__PURE__ */ React.createElement(
               ToolbarItem,
               {
+                tinaForm,
                 key: toolbarItem.name,
                 name: toolbarItem.name,
                 hidden,
@@ -13012,7 +13050,14 @@ const RichEditor = (props) => {
           children: value
         });
       },
-      firstChildren: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Toolbar, { templates: props.field.templates, inlineOnly: false }), /* @__PURE__ */ React__default.createElement(FloatingLink, null))
+      firstChildren: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+        Toolbar,
+        {
+          tinaForm: props.tinaForm,
+          templates: props.field.templates,
+          inlineOnly: false
+        }
+      ), /* @__PURE__ */ React__default.createElement(FloatingLink, null))
     }
   ));
 };
@@ -26764,6 +26809,13 @@ class AbstractAuthProvider {
   getLoginStrategy() {
     return "Redirect";
   }
+  /**
+   * A React component that renders the custom UI for the login screen.
+   * Set the LoginStrategy to LoginScreen when providing this function.
+   */
+  getLoginScreen() {
+    return null;
+  }
   getSessionProvider() {
     return DefaultSessionProvider;
   }
@@ -27795,13 +27847,18 @@ function sleep(ms) {
 const AuthWallInner = ({
   children,
   cms,
-  loginScreen,
   getModalActions
 }) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const client = cms.api.tina;
   const isTinaCloud = !client.isLocalMode && !((_c = (_b = (_a = client.schema) == null ? void 0 : _a.config) == null ? void 0 : _b.config) == null ? void 0 : _c.contentApiUrlOverride);
   const loginStrategy = client.authProvider.getLoginStrategy();
+  const loginScreen = client.authProvider.getLoginScreen();
+  if (loginStrategy === "LoginScreen" && !loginScreen) {
+    throw new Error(
+      "LoginScreen is set as the login strategy but no login screen component was provided"
+    );
+  }
   const [activeModal, setActiveModal] = useState(null);
   const [errorMessage, setErrorMessage] = useState();
   const [showChildren, setShowChildren] = useState(false);
@@ -27863,10 +27920,12 @@ const AuthWallInner = ({
       setActiveModal(null);
     }
   }) : [];
-  const handleAuthenticate = async () => {
+  const handleAuthenticate = async (loginScreenProps) => {
     try {
       setAuthenticated(false);
-      const token = await client.authProvider.authenticate(authProps);
+      const token = await client.authProvider.authenticate(
+        loginScreenProps || authProps
+      );
       if (typeof (client == null ? void 0 : client.onLogin) === "function") {
         await (client == null ? void 0 : client.onLogin({ token }));
       }
@@ -27980,6 +28039,7 @@ const AuthWallInner = ({
               await authProvider.logout();
               if (typeof (client == null ? void 0 : client.onLogout) === "function") {
                 await client.onLogout();
+                await new Promise((resolve) => setTimeout(resolve, 500));
               }
               window.location.href = new URL(window.location.href).pathname;
             } catch (e) {
@@ -27995,7 +28055,9 @@ const AuthWallInner = ({
         }
       ]
     }
-  ), showChildren ? children : loginScreen ? loginScreen : null);
+  ), showChildren ? children : ((_d = client.authProvider) == null ? void 0 : _d.getLoginStrategy()) === "LoginScreen" && loginScreen ? loginScreen({
+    handleAuthenticate: async (props) => handleAuthenticate(props)
+  }) : null);
 };
 const TinaCloudProvider = (props) => {
   var _a, _b, _c;
@@ -28903,6 +28965,7 @@ const LogoutRedirect = () => {
       await ((_f = (_e = (_d = cms == null ? void 0 : cms.api) == null ? void 0 : _d.tina) == null ? void 0 : _e.authProvider) == null ? void 0 : _f.logout());
       if ((_h = (_g = cms == null ? void 0 : cms.api) == null ? void 0 : _g.tina) == null ? void 0 : _h.onLogout) {
         await ((_j = (_i = cms == null ? void 0 : cms.api) == null ? void 0 : _i.tina) == null ? void 0 : _j.onLogout());
+        await new Promise((resolve) => setTimeout(resolve, 500));
       }
     }
     setEdit(false);

package/dist/internalClient/authProvider.d.ts

@@ -19,6 +19,11 @@ export declare abstract class AbstractAuthProvider implements AuthProvider {
     isAuthorized(context?: any): Promise<boolean>;
     isAuthenticated(): Promise<boolean>;
     getLoginStrategy(): LoginStrategy;
+    /**
+     * A React component that renders the custom UI for the login screen.
+     * Set the LoginStrategy to LoginScreen when providing this function.
+     */
+    getLoginScreen(): any;
     getSessionProvider(): import("react").FC<{}>;
     abstract getToken(): any;
     abstract getUser(): any;

package/dist/toolkit/fields/plugins/mdx-field-plugin/plate/plugins/ui/toolbar/index.d.ts

@@ -1,10 +1,13 @@
 /// <reference types="react" />
 import type { MdxTemplate } from '../../../types';
-export declare function Toolbar({ templates, }: {
+import type { Form } from '../../../../../../../forms';
+export declare function Toolbar({ templates, tinaForm, }: {
+    tinaForm: Form;
     inlineOnly: boolean;
     templates: MdxTemplate[];
 }): JSX.Element;
-export declare const FloatingToolbar: ({ templates, }: {
+export declare const FloatingToolbar: ({ templates, tinaForm, }: {
+    tinaForm: Form;
     templates: MdxTemplate[];
 }) => JSX.Element;
 export declare const FloatingLink: () => JSX.Element;

package/dist/toolkit/fields/plugins/mdx-field-plugin/plate/plugins/ui/toolbar/toolbar-item.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import type { PlateEditor } from '@udecode/plate-headless';
 import type { MdxTemplate } from '../../../types';
+import { Form } from '../../../../../../../forms';
 export declare type ToolbarItemType = {
     label: string;
     name: string;
@@ -11,8 +12,9 @@ export declare type ToolbarItemType = {
     icon?: string;
     options?: {}[];
     isLastItem?: boolean;
+    tinaForm: Form;
 };
-export declare const ToolbarItem: ({ hidden, label, active, onMouseDown, icon, options, name, isLastItem, }: ToolbarItemType) => JSX.Element;
+export declare const ToolbarItem: ({ hidden, label, active, onMouseDown, icon, options, name, isLastItem, tinaForm, }: ToolbarItemType) => JSX.Element;
 export declare const EmbedButton: ({ editor, templates, }: {
     editor: PlateEditor;
     templates: MdxTemplate[];

package/dist/toolkit/react-cloud-config/cloud-config-plugin.d.ts

@@ -1,4 +1,5 @@
 import { Plugin } from '../core';
+import type { IconType } from 'react-icons';
 /**
  * Represents a Tina Cloud Config that should be accessible via the CMS.
  *
@@ -28,6 +29,7 @@ export interface CloudConfigOptions {
         text: string;
         href: string;
     };
+    Icon?: IconType;
 }
 /**
  * Creates cloud config plugins.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinacms",
-  "version": "1.5.26",
+  "version": "1.5.27",
   "main": "dist/index.js",
   "module": "./dist/index.mjs",
   "exports": {
@@ -69,9 +69,9 @@
     "@react-types/combobox": "^3.2.0",
     "@react-types/shared": "^3.10.0",
     "@sambego/storybook-styles": "^1.0.0",
-    "@tinacms/schema-tools": "1.4.14",
-    "@tinacms/search": "1.0.15",
-    "@tinacms/mdx": "1.3.22",
+    "@tinacms/schema-tools": "1.4.15",
+    "@tinacms/search": "1.0.16",
+    "@tinacms/mdx": "1.3.23",
     "@tinacms/sharedctx": "1.0.2",
     "@udecode/plate-headless": "^21.4.0",
     "atob": "2.1.2",