tinacms 1.0.1 → 1.1.0

package/dist/index.es.js

@@ -2117,6 +2117,7 @@ const parseRefForBranchName = (ref) => {
 };
 class Client {
   constructor({ tokenStorage = "MEMORY", ...options }) {
+    var _a, _b, _c, _d;
     this.events = new EventBus();
     this.addPendingContent = async (props) => {
       const mutation = `#graphql
@@ -2131,7 +2132,7 @@ mutation addPendingDocumentMutation(
     collection: $collection
   ) {
     ... on Document {
-      sys {
+      _sys {
         relativePath
         path
         breadcrumbs
@@ -2164,6 +2165,7 @@ mutation addPendingDocumentMutation(
       });
       return parse(data.getOptimizedQuery);
     };
+    this.onLogin = (_d = (_c = (_b = (_a = options.schema) == null ? void 0 : _a.config) == null ? void 0 : _b.admin) == null ? void 0 : _c.auth) == null ? void 0 : _d.onLogin;
     if (options.schema) {
       const enrichedSchema = new TinaSchema({
         version: { fullVersion: "", major: "", minor: "", patch: "" },
@@ -2221,7 +2223,7 @@ mutation addPendingDocumentMutation(
     }
   }
   get isLocalMode() {
-    return this.contentApiUrl.includes("localhost");
+    return false;
   }
   setBranch(branchName) {
     var _a, _b, _c, _d;
@@ -2352,6 +2354,9 @@ mutation addPendingDocumentMutation(
   async isAuthenticated() {
     return !!await this.getUser();
   }
+  async onLogout() {
+    this.setToken(null);
+  }
   async authenticate() {
     const token = await authenticate(this.clientId, this.frontendUrl);
     this.setToken(token);
@@ -2415,6 +2420,7 @@ mutation addPendingDocumentMutation(
   }
 }
 const DEFAULT_LOCAL_TINA_GQL_SERVER_URL = "http://localhost:4001/graphql";
+const LOCAL_CLIENT_KEY = "tina.local.isLogedIn";
 class LocalClient extends Client {
   constructor(props) {
     const clientProps = {
@@ -2425,11 +2431,21 @@ class LocalClient extends Client {
     };
     super(clientProps);
   }
-  async isAuthorized() {
+  get isLocalMode() {
     return true;
   }
+  async onLogout() {
+    localStorage.removeItem(LOCAL_CLIENT_KEY);
+  }
+  async authenticate() {
+    localStorage.setItem(LOCAL_CLIENT_KEY, "true");
+    return { access_token: "LOCAL", id_token: "LOCAL", refresh_token: "LOCAL" };
+  }
+  async isAuthorized() {
+    return localStorage.getItem(LOCAL_CLIENT_KEY) === "true";
+  }
   async isAuthenticated() {
-    return true;
+    return localStorage.getItem(LOCAL_CLIENT_KEY) === "true";
   }
 }
 function ModalBuilder(modalProps) {
@@ -2659,6 +2675,7 @@ const AuthWallInner = ({
   getModalActions
 }) => {
   const client = cms.api.tina;
+  const isLocal = client.isLocalMode;
   const [activeModal, setActiveModal] = useState(null);
   const [showChildren, setShowChildren] = useState(false);
   React.useEffect(() => {
@@ -2687,8 +2704,8 @@ const AuthWallInner = ({
     }
   }) : [];
   return /* @__PURE__ */ React.createElement(React.Fragment, null, activeModal === "authenticate" && /* @__PURE__ */ React.createElement(ModalBuilder, {
-    title: "Tina Cloud Authorization",
-    message: "To save edits, Tina Cloud authorization is required. On save, changes will get commited using your account.",
+    title: isLocal ? "Enter into edit mode" : "Tina Cloud Authorization",
+    message: isLocal ? "To save edits, enter into edit mode. On save, changes will saved to the local filesystem." : "To save edits, Tina Cloud authorization is required. On save, changes will get commited using your account.",
     close,
     actions: [
       ...otherModalActions,
@@ -2701,9 +2718,12 @@ const AuthWallInner = ({
         primary: false
       },
       {
-        name: "Continue to Tina Cloud",
+        name: isLocal ? "Enter Edit Mode" : "Continue to Tina Cloud",
         action: async () => {
-          await client.authenticate();
+          const token = await client.authenticate();
+          if (typeof (client == null ? void 0 : client.onLogin) === "function") {
+            await (client == null ? void 0 : client.onLogin({ token }));
+          }
           onAuthSuccess();
         },
         primary: true
@@ -5130,7 +5150,7 @@ const CollectionListPage = () => {
           className: "block text-xs text-gray-400 mb-1 uppercase"
         }, hasTitle ? "Title" : "Filename"), /* @__PURE__ */ React.createElement("span", {
           className: "h-5 leading-5 block truncate"
-        }, subfolders && /* @__PURE__ */ React.createElement("span", {
+        }, !hasTitle && subfolders && /* @__PURE__ */ React.createElement("span", {
           className: "text-xs text-gray-400"
         }, `${subfolders}/`), /* @__PURE__ */ React.createElement("span", null, hasTitle ? (_a2 = document.node._sys) == null ? void 0 : _a2.title : document.node._sys.filename))))), hasTitle && /* @__PURE__ */ React.createElement("td", {
           className: "px-3 py-4 truncate max-w-0 "
@@ -5138,7 +5158,9 @@ const CollectionListPage = () => {
           className: "block text-xs text-gray-400 mb-1 uppercase"
         }, "Filename"), /* @__PURE__ */ React.createElement("span", {
           className: "h-5 leading-5 block text-sm font-medium text-gray-900 truncate"
-        }, document.node._sys.filename)), /* @__PURE__ */ React.createElement("td", {
+        }, subfolders && /* @__PURE__ */ React.createElement("span", {
+          className: "text-xs text-gray-400"
+        }, `${subfolders}/`), /* @__PURE__ */ React.createElement("span", null, document.node._sys.filename))), /* @__PURE__ */ React.createElement("td", {
           className: "px-3 py-4 truncate w-[15%]"
         }, /* @__PURE__ */ React.createElement("span", {
           className: "block text-xs text-gray-400 mb-1 uppercase"

package/dist/index.js

@@ -2133,6 +2133,7 @@
   };
   class Client {
     constructor({ tokenStorage = "MEMORY", ...options }) {
+      var _a, _b, _c, _d;
       this.events = new toolkit.EventBus();
       this.addPendingContent = async (props) => {
         const mutation = `#graphql
@@ -2147,7 +2148,7 @@ mutation addPendingDocumentMutation(
     collection: $collection
   ) {
     ... on Document {
-      sys {
+      _sys {
         relativePath
         path
         breadcrumbs
@@ -2180,6 +2181,7 @@ mutation addPendingDocumentMutation(
         });
         return G.parse(data.getOptimizedQuery);
       };
+      this.onLogin = (_d = (_c = (_b = (_a = options.schema) == null ? void 0 : _a.config) == null ? void 0 : _b.admin) == null ? void 0 : _c.auth) == null ? void 0 : _d.onLogin;
       if (options.schema) {
         const enrichedSchema = new schemaTools.TinaSchema({
           version: { fullVersion: "", major: "", minor: "", patch: "" },
@@ -2237,7 +2239,7 @@ mutation addPendingDocumentMutation(
       }
     }
     get isLocalMode() {
-      return this.contentApiUrl.includes("localhost");
+      return false;
     }
     setBranch(branchName) {
       var _a, _b, _c, _d;
@@ -2368,6 +2370,9 @@ mutation addPendingDocumentMutation(
     async isAuthenticated() {
       return !!await this.getUser();
     }
+    async onLogout() {
+      this.setToken(null);
+    }
     async authenticate() {
       const token = await authenticate(this.clientId, this.frontendUrl);
       this.setToken(token);
@@ -2431,6 +2436,7 @@ mutation addPendingDocumentMutation(
     }
   }
   const DEFAULT_LOCAL_TINA_GQL_SERVER_URL = "http://localhost:4001/graphql";
+  const LOCAL_CLIENT_KEY = "tina.local.isLogedIn";
   class LocalClient extends Client {
     constructor(props) {
       const clientProps = {
@@ -2441,11 +2447,21 @@ mutation addPendingDocumentMutation(
       };
       super(clientProps);
     }
-    async isAuthorized() {
+    get isLocalMode() {
       return true;
     }
+    async onLogout() {
+      localStorage.removeItem(LOCAL_CLIENT_KEY);
+    }
+    async authenticate() {
+      localStorage.setItem(LOCAL_CLIENT_KEY, "true");
+      return { access_token: "LOCAL", id_token: "LOCAL", refresh_token: "LOCAL" };
+    }
+    async isAuthorized() {
+      return localStorage.getItem(LOCAL_CLIENT_KEY) === "true";
+    }
     async isAuthenticated() {
-      return true;
+      return localStorage.getItem(LOCAL_CLIENT_KEY) === "true";
     }
   }
   function ModalBuilder(modalProps) {
@@ -2675,6 +2691,7 @@ mutation addPendingDocumentMutation(
     getModalActions
   }) => {
     const client = cms.api.tina;
+    const isLocal = client.isLocalMode;
     const [activeModal, setActiveModal] = React.useState(null);
     const [showChildren, setShowChildren] = React.useState(false);
     React__default["default"].useEffect(() => {
@@ -2703,8 +2720,8 @@ mutation addPendingDocumentMutation(
       }
     }) : [];
     return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, activeModal === "authenticate" && /* @__PURE__ */ React__default["default"].createElement(ModalBuilder, {
-      title: "Tina Cloud Authorization",
-      message: "To save edits, Tina Cloud authorization is required. On save, changes will get commited using your account.",
+      title: isLocal ? "Enter into edit mode" : "Tina Cloud Authorization",
+      message: isLocal ? "To save edits, enter into edit mode. On save, changes will saved to the local filesystem." : "To save edits, Tina Cloud authorization is required. On save, changes will get commited using your account.",
       close,
       actions: [
         ...otherModalActions,
@@ -2717,9 +2734,12 @@ mutation addPendingDocumentMutation(
           primary: false
         },
         {
-          name: "Continue to Tina Cloud",
+          name: isLocal ? "Enter Edit Mode" : "Continue to Tina Cloud",
           action: async () => {
-            await client.authenticate();
+            const token = await client.authenticate();
+            if (typeof (client == null ? void 0 : client.onLogin) === "function") {
+              await (client == null ? void 0 : client.onLogin({ token }));
+            }
             onAuthSuccess();
           },
           primary: true
@@ -5146,7 +5166,7 @@ This will work when developing locally but NOT when deployed to production.
             className: "block text-xs text-gray-400 mb-1 uppercase"
           }, hasTitle ? "Title" : "Filename"), /* @__PURE__ */ React__default["default"].createElement("span", {
             className: "h-5 leading-5 block truncate"
-          }, subfolders && /* @__PURE__ */ React__default["default"].createElement("span", {
+          }, !hasTitle && subfolders && /* @__PURE__ */ React__default["default"].createElement("span", {
             className: "text-xs text-gray-400"
           }, `${subfolders}/`), /* @__PURE__ */ React__default["default"].createElement("span", null, hasTitle ? (_a2 = document.node._sys) == null ? void 0 : _a2.title : document.node._sys.filename))))), hasTitle && /* @__PURE__ */ React__default["default"].createElement("td", {
             className: "px-3 py-4 truncate max-w-0 "
@@ -5154,7 +5174,9 @@ This will work when developing locally but NOT when deployed to production.
             className: "block text-xs text-gray-400 mb-1 uppercase"
           }, "Filename"), /* @__PURE__ */ React__default["default"].createElement("span", {
             className: "h-5 leading-5 block text-sm font-medium text-gray-900 truncate"
-          }, document.node._sys.filename)), /* @__PURE__ */ React__default["default"].createElement("td", {
+          }, subfolders && /* @__PURE__ */ React__default["default"].createElement("span", {
+            className: "text-xs text-gray-400"
+          }, `${subfolders}/`), /* @__PURE__ */ React__default["default"].createElement("span", null, document.node._sys.filename))), /* @__PURE__ */ React__default["default"].createElement("td", {
             className: "px-3 py-4 truncate w-[15%]"
           }, /* @__PURE__ */ React__default["default"].createElement("span", {
             className: "block text-xs text-gray-400 mb-1 uppercase"

package/dist/internalClient/index.d.ts

@@ -15,6 +15,9 @@ import { BranchData, EventBus } from '@tinacms/toolkit';
 import { DocumentNode, GraphQLSchema } from 'graphql';
 import gql from 'graphql-tag';
 import { TinaSchema, TinaCloudSchema } from '@tinacms/schema-tools';
+export declare type OnLoginFunc = (args: {
+    token: TokenObject;
+}) => Promise<void>;
 export declare type TinaIOConfig = {
     assetsApiUrlOverride?: string;
     frontendUrlOverride?: string;
@@ -27,10 +30,12 @@ interface ServerOptions {
     branch: string;
     customContentApiUrl?: string;
     getTokenFn?: () => Promise<TokenObject>;
+    onLogin?: OnLoginFunc;
     tinaioConfig?: TinaIOConfig;
     tokenStorage?: 'MEMORY' | 'LOCAL_STORAGE' | 'CUSTOM';
 }
 export declare class Client {
+    onLogin: OnLoginFunc;
     frontendUrl: string;
     contentApiUrl: string;
     identityApiUrl: string;
@@ -107,6 +112,7 @@ export declare class Client {
     getRefreshedToken(tokens: string): Promise<TokenObject>;
     isAuthorized(): Promise<boolean>;
     isAuthenticated(): Promise<boolean>;
+    onLogout(): Promise<void>;
     authenticate(): Promise<TokenObject>;
     /**
      * Wraps the normal fetch function with same API but adds the authorization header token.
@@ -127,7 +133,14 @@ export declare class LocalClient extends Client {
     constructor(props?: {
         customContentApiUrl?: string;
         schema?: TinaCloudSchema<false>;
-    });
+    } & Omit<ServerOptions, 'clientId' | 'branch'>);
+    get isLocalMode(): boolean;
+    onLogout(): Promise<void>;
+    authenticate(): Promise<{
+        access_token: string;
+        id_token: string;
+        refresh_token: string;
+    }>;
     isAuthorized(): Promise<boolean>;
     isAuthenticated(): Promise<boolean>;
 }

package/dist/react.d.ts

@@ -12,3 +12,15 @@ export declare function useTina<T extends object>(props: {
 export declare function useEditState(): {
     edit: boolean;
 };
+/**
+ * Grab the field name for the given attribute
+ * to signal to Tina which DOM element the field
+ * is working with.
+ */
+export declare const tinaField: <T extends object & {
+    __meta__?: {
+        id: string;
+        name?: string;
+        fields: Record<string, string>;
+    };
+}>(obj: T, field?: Exclude<keyof T, "__typename" | "_sys">) => string;

package/dist/react.es.js

@@ -31,4 +31,16 @@ function useEditState() {
   }, []);
   return { edit };
 }
-export { useEditState, useTina };
+const tinaField = (obj, field) => {
+  var _a, _b, _c;
+  if (!field) {
+    return `${(_a = obj.__meta__) == null ? void 0 : _a.id}#${(_b = obj.__meta__) == null ? void 0 : _b.name}`;
+  }
+  if (obj == null ? void 0 : obj.__meta__) {
+    if (typeof field === "string") {
+      return `${(_c = obj.__meta__) == null ? void 0 : _c.id}#${obj.__meta__.fields[field]}`;
+    }
+  }
+  return "";
+};
+export { tinaField, useEditState, useTina };

package/dist/react.js

@@ -38,6 +38,19 @@
     }, []);
     return { edit };
   }
+  const tinaField = (obj, field) => {
+    var _a, _b, _c;
+    if (!field) {
+      return `${(_a = obj.__meta__) == null ? void 0 : _a.id}#${(_b = obj.__meta__) == null ? void 0 : _b.name}`;
+    }
+    if (obj == null ? void 0 : obj.__meta__) {
+      if (typeof field === "string") {
+        return `${(_c = obj.__meta__) == null ? void 0 : _c.id}#${obj.__meta__.fields[field]}`;
+      }
+    }
+    return "";
+  };
+  exports2.tinaField = tinaField;
   exports2.useEditState = useEditState;
   exports2.useTina = useTina;
   Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });

package/dist/rich-text/index.d.ts

@@ -51,6 +51,9 @@ declare type BaseComponents = {
     code?: {
         children: JSX.Element;
     };
+    text?: {
+        children: string;
+    };
     ul?: {
         children: JSX.Element;
     };

package/dist/rich-text/index.es.js

@@ -79,6 +79,10 @@ const Leaf = (props) => {
       ...rest
     }));
   }
+  if (props.components.text) {
+    const Component = props.components.text;
+    return /* @__PURE__ */ React.createElement(Component, null, props.text);
+  }
   return /* @__PURE__ */ React.createElement(React.Fragment, null, props.text);
 };
 const MemoNode = (props) => {

package/dist/rich-text/index.js

@@ -86,6 +86,10 @@
         ...rest
       }));
     }
+    if (props.components.text) {
+      const Component = props.components.text;
+      return /* @__PURE__ */ React__default["default"].createElement(Component, null, props.text);
+    }
     return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, props.text);
   };
   const MemoNode = (props) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinacms",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "main": "dist/index.js",
   "module": "./dist/index.es.js",
   "exports": {
@@ -55,9 +55,9 @@
     "@headlessui/react": "^1.5.0",
     "@heroicons/react": "^1.0.4",
     "@react-hook/window-size": "^3.0.7",
-    "@tinacms/schema-tools": "1.0.1",
+    "@tinacms/schema-tools": "1.0.2",
     "@tinacms/sharedctx": "1.0.0",
-    "@tinacms/toolkit": "1.0.1",
+    "@tinacms/toolkit": "1.1.0",
     "crypto-js": "^4.0.0",
     "encoding": "0.1.13",
     "fetch-ponyfill": "^7.1.0",