tinacms 1.5.5 → 1.5.7

package/dist/admin/pages/CollectionCreatePage.d.ts

@@ -1,4 +1,12 @@
 /// <reference types="react" />
+import type { TinaCMS } from '@tinacms/toolkit';
 declare const CollectionCreatePage: () => JSX.Element;
-export declare const RenderForm: ({ cms, collection, folder, templateName, mutationInfo, customDefaults, }: any) => JSX.Element;
+export declare const RenderForm: ({ cms, collection, folder, templateName, mutationInfo, customDefaults, }: {
+    cms: TinaCMS;
+    collection: any;
+    folder: any;
+    templateName: any;
+    mutationInfo: any;
+    customDefaults?: any;
+}) => JSX.Element;
 export default CollectionCreatePage;

package/dist/index.es.js

@@ -255,10 +255,8 @@ mutation addPendingDocumentMutation(
     }
     return json.data;
   }
-  async syncTinaMedia() {
-    const res = await this.fetchWithToken(`${this.contentApiBase}/assets/${this.clientId}/sync/${this.branch}`, { method: "POST" });
-    const jsonRes = await res.json();
-    return jsonRes;
+  get appDashboardLink() {
+    return `${this.frontendUrl}/projects/${this.clientId}`;
   }
   async checkSyncStatus({
     assetsSyncing
@@ -290,6 +288,12 @@ mutation addPendingDocumentMutation(
     }).join(""));
     return JSON.parse(jsonPayload);
   }
+  async getProject() {
+    const res = await this.fetchWithToken(`${this.identityApiUrl}/v2/apps/${this.clientId}`, {
+      method: "GET"
+    });
+    return res.json();
+  }
   async getRefreshedToken(tokens) {
     const { access_token, id_token, refresh_token } = JSON.parse(tokens);
     const { exp, iss, client_id } = this.parseJwt(access_token);
@@ -1962,6 +1966,9 @@ var styles = `.tina-tailwind {
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.tina-tailwind .outline {
+  outline-style: solid;
+}
 .tina-tailwind .ring-1 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -3202,9 +3209,10 @@ const useCollectionFolder = () => {
   const loc = useLocation();
   useEffect(() => {
     const match = loc.pathname.match(folderRegex);
+    const folderName = match ? decodeURIComponent(match[1]) : "";
     const update = {
-      name: match ? match[1] : "",
-      fullyQualifiedName: match ? match[1] ? `~/${match[1]}` : "~" : "",
+      name: folderName,
+      fullyQualifiedName: match ? folderName ? `~/${folderName}` : "~" : "",
       loading: false,
       parentName: ""
     };
@@ -4104,6 +4112,18 @@ const RenderForm$1 = ({
   const windowWidth = useWindowWidth();
   const renderNavToggle = windowWidth < navBreakpoint + 1;
   const headerPadding = renderNavToggle ? "px-20" : "px-6";
+  React.useEffect(() => {
+    cms.dispatch({ type: "forms:add", value: form });
+    cms.dispatch({ type: "forms:set-active-form-id", value: form.id });
+    return () => {
+      cms.dispatch({ type: "forms:remove", value: form.id });
+      cms.dispatch({ type: "forms:set-active-form-id", value: null });
+    };
+  }, [JSON.stringify(formInfo.fields)]);
+  if (!cms.state.activeFormId) {
+    return null;
+  }
+  const activeForm = cms.state.forms.find(({ tinaForm }) => tinaForm.id === form.id);
   return /* @__PURE__ */ React.createElement(PageWrapper, null, /* @__PURE__ */ React.createElement(React.Fragment, null, ((_f = (_e = cms == null ? void 0 : cms.api) == null ? void 0 : _e.tina) == null ? void 0 : _f.isLocalMode) ? /* @__PURE__ */ React.createElement(LocalWarning, null) : /* @__PURE__ */ React.createElement(BillingWarning, null), /* @__PURE__ */ React.createElement("div", {
     className: `py-4 border-b border-gray-200 bg-white ${headerPadding}`
   }, /* @__PURE__ */ React.createElement("div", {
@@ -4121,8 +4141,8 @@ const RenderForm$1 = ({
     className: "text-xl text-gray-700 font-medium leading-tight"
   }, "Create New")), /* @__PURE__ */ React.createElement(FormStatus, {
     pristine: formIsPristine
-  }))), /* @__PURE__ */ React.createElement(FormBuilder, {
-    form,
+  }))), activeForm && /* @__PURE__ */ React.createElement(FormBuilder, {
+    form: activeForm,
     onPristineChange: setFormIsPristine
   })));
 };
@@ -4284,6 +4304,18 @@ const RenderForm = ({
   const windowWidth = useWindowWidth();
   const renderNavToggle = windowWidth < navBreakpoint + 1;
   const headerPadding = renderNavToggle ? "px-20" : "px-6";
+  React.useEffect(() => {
+    cms.dispatch({ type: "forms:add", value: form });
+    cms.dispatch({ type: "forms:set-active-form-id", value: form.id });
+    return () => {
+      cms.dispatch({ type: "forms:remove", value: form.id });
+      cms.dispatch({ type: "forms:set-active-form-id", value: null });
+    };
+  }, [JSON.stringify(document._values)]);
+  if (!cms.state.activeFormId) {
+    return null;
+  }
+  const activeForm = cms.state.forms.find(({ tinaForm }) => tinaForm.id === form.id);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, ((_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode) ? /* @__PURE__ */ React.createElement(LocalWarning, null) : /* @__PURE__ */ React.createElement(BillingWarning, null), /* @__PURE__ */ React.createElement("div", {
     className: `py-4 border-b border-gray-200 bg-white ${headerPadding}`
   }, /* @__PURE__ */ React.createElement("div", {
@@ -4301,8 +4333,8 @@ const RenderForm = ({
     className: "text-xl text-gray-700 font-medium leading-tight"
   }, "Edit ", `${filename}.${collection.format}`)), /* @__PURE__ */ React.createElement(FormStatus, {
     pristine: formIsPristine
-  }))), /* @__PURE__ */ React.createElement(FormBuilder, {
-    form,
+  }))), activeForm && /* @__PURE__ */ React.createElement(FormBuilder, {
+    form: activeForm,
     onPristineChange: setFormIsPristine
   }));
 };

package/dist/index.js

@@ -270,10 +270,8 @@ mutation addPendingDocumentMutation(
       }
       return json.data;
     }
-    async syncTinaMedia() {
-      const res = await this.fetchWithToken(`${this.contentApiBase}/assets/${this.clientId}/sync/${this.branch}`, { method: "POST" });
-      const jsonRes = await res.json();
-      return jsonRes;
+    get appDashboardLink() {
+      return `${this.frontendUrl}/projects/${this.clientId}`;
     }
     async checkSyncStatus({
       assetsSyncing
@@ -305,6 +303,12 @@ mutation addPendingDocumentMutation(
       }).join(""));
       return JSON.parse(jsonPayload);
     }
+    async getProject() {
+      const res = await this.fetchWithToken(`${this.identityApiUrl}/v2/apps/${this.clientId}`, {
+        method: "GET"
+      });
+      return res.json();
+    }
     async getRefreshedToken(tokens) {
       const { access_token, id_token, refresh_token } = JSON.parse(tokens);
       const { exp, iss, client_id } = this.parseJwt(access_token);
@@ -1977,6 +1981,9 @@ mutation addPendingDocumentMutation(
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.tina-tailwind .outline {
+  outline-style: solid;
+}
 .tina-tailwind .ring-1 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -3217,9 +3224,10 @@ This will work when developing locally but NOT when deployed to production.
     const loc = reactRouterDom.useLocation();
     React.useEffect(() => {
       const match = loc.pathname.match(folderRegex);
+      const folderName = match ? decodeURIComponent(match[1]) : "";
       const update = {
-        name: match ? match[1] : "",
-        fullyQualifiedName: match ? match[1] ? `~/${match[1]}` : "~" : "",
+        name: folderName,
+        fullyQualifiedName: match ? folderName ? `~/${folderName}` : "~" : "",
         loading: false,
         parentName: ""
       };
@@ -4119,6 +4127,18 @@ This will work when developing locally but NOT when deployed to production.
     const windowWidth = windowSize.useWindowWidth();
     const renderNavToggle = windowWidth < navBreakpoint + 1;
     const headerPadding = renderNavToggle ? "px-20" : "px-6";
+    React__default["default"].useEffect(() => {
+      cms.dispatch({ type: "forms:add", value: form });
+      cms.dispatch({ type: "forms:set-active-form-id", value: form.id });
+      return () => {
+        cms.dispatch({ type: "forms:remove", value: form.id });
+        cms.dispatch({ type: "forms:set-active-form-id", value: null });
+      };
+    }, [JSON.stringify(formInfo.fields)]);
+    if (!cms.state.activeFormId) {
+      return null;
+    }
+    const activeForm = cms.state.forms.find(({ tinaForm }) => tinaForm.id === form.id);
     return /* @__PURE__ */ React__default["default"].createElement(PageWrapper, null, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, ((_f = (_e = cms == null ? void 0 : cms.api) == null ? void 0 : _e.tina) == null ? void 0 : _f.isLocalMode) ? /* @__PURE__ */ React__default["default"].createElement(toolkit.LocalWarning, null) : /* @__PURE__ */ React__default["default"].createElement(toolkit.BillingWarning, null), /* @__PURE__ */ React__default["default"].createElement("div", {
       className: `py-4 border-b border-gray-200 bg-white ${headerPadding}`
     }, /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -4136,8 +4156,8 @@ This will work when developing locally but NOT when deployed to production.
       className: "text-xl text-gray-700 font-medium leading-tight"
     }, "Create New")), /* @__PURE__ */ React__default["default"].createElement(toolkit.FormStatus, {
       pristine: formIsPristine
-    }))), /* @__PURE__ */ React__default["default"].createElement(toolkit.FormBuilder, {
-      form,
+    }))), activeForm && /* @__PURE__ */ React__default["default"].createElement(toolkit.FormBuilder, {
+      form: activeForm,
       onPristineChange: setFormIsPristine
     })));
   };
@@ -4299,6 +4319,18 @@ This will work when developing locally but NOT when deployed to production.
     const windowWidth = windowSize.useWindowWidth();
     const renderNavToggle = windowWidth < navBreakpoint + 1;
     const headerPadding = renderNavToggle ? "px-20" : "px-6";
+    React__default["default"].useEffect(() => {
+      cms.dispatch({ type: "forms:add", value: form });
+      cms.dispatch({ type: "forms:set-active-form-id", value: form.id });
+      return () => {
+        cms.dispatch({ type: "forms:remove", value: form.id });
+        cms.dispatch({ type: "forms:set-active-form-id", value: null });
+      };
+    }, [JSON.stringify(document._values)]);
+    if (!cms.state.activeFormId) {
+      return null;
+    }
+    const activeForm = cms.state.forms.find(({ tinaForm }) => tinaForm.id === form.id);
     return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, ((_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode) ? /* @__PURE__ */ React__default["default"].createElement(toolkit.LocalWarning, null) : /* @__PURE__ */ React__default["default"].createElement(toolkit.BillingWarning, null), /* @__PURE__ */ React__default["default"].createElement("div", {
       className: `py-4 border-b border-gray-200 bg-white ${headerPadding}`
     }, /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -4316,8 +4348,8 @@ This will work when developing locally but NOT when deployed to production.
       className: "text-xl text-gray-700 font-medium leading-tight"
     }, "Edit ", `${filename}.${collection.format}`)), /* @__PURE__ */ React__default["default"].createElement(toolkit.FormStatus, {
       pristine: formIsPristine
-    }))), /* @__PURE__ */ React__default["default"].createElement(toolkit.FormBuilder, {
-      form,
+    }))), activeForm && /* @__PURE__ */ React__default["default"].createElement(toolkit.FormBuilder, {
+      form: activeForm,
       onPristineChange: setFormIsPristine
     }));
   };

package/dist/internalClient/index.d.ts

@@ -160,9 +160,7 @@ export declare class Client {
     request<ReturnType>(query: ((gqlTag: typeof gql) => DocumentNode) | string, { variables }: {
         variables: object;
     }): Promise<ReturnType>;
-    syncTinaMedia(): Promise<{
-        assetsSyncing: string[];
-    }>;
+    get appDashboardLink(): string;
     checkSyncStatus({ assetsSyncing, }: {
         assetsSyncing: string[];
     }): Promise<{
@@ -179,6 +177,7 @@ export declare class Client {
         cursor?: string;
     }>;
     parseJwt(token: any): any;
+    getProject(): Promise<any>;
     getRefreshedToken(tokens: string): Promise<TokenObject>;
     isAuthorized(): Promise<boolean>;
     isAuthenticated(): Promise<boolean>;

package/dist/react.d.ts

@@ -1,7 +1,3 @@
-/**
- * This is an experimental version of the useTina hook,
- * it is only meant to be used with Tina in "iframe mode".
- */
 export declare function useTina<T extends object>(props: {
     query: string;
     variables: object;
@@ -19,9 +15,19 @@ export declare function useEditState(): {
  * is working with.
  */
 export declare const tinaField: <T extends object & {
-    _tina_metadata?: {
-        id: string;
-        name?: string;
-        fields: Record<string, string>;
+    _content_source?: {
+        queryId: string;
+        path: (number | string)[];
     };
-}>(obj: T, field?: Exclude<keyof T, "__typename" | "_sys">) => string;
+}>(object: T, property?: Exclude<keyof T, "__typename" | "_sys">, index?: number) => string;
+export declare const addMetadata: <T extends object>(id: string, object: T & {
+    type?: string;
+    _content_source?: unknown;
+}, path: (string | number)[]) => T;
+/**
+ * This is a pretty rudimentary approach to hashing the query and variables to
+ * ensure we treat multiple queries on the page uniquely. It's possible
+ * that we would have collisions, and I'm not sure of the likeliness but seems
+ * like it'd be rare.
+ */
+export declare const hashFromQuery: (input: string) => string;

package/dist/react.es.js

@@ -1,23 +1,110 @@
 import React from "react";
 function useTina(props) {
+  const stringifiedQuery = JSON.stringify({
+    query: props.query,
+    variables: props.variables
+  });
+  const id = React.useMemo(() => hashFromQuery(stringifiedQuery), [stringifiedQuery]);
   const [data, setData] = React.useState(props.data);
   const [isClient, setIsClient] = React.useState(false);
-  const id = JSON.stringify({ query: props.query, variables: props.variables });
+  const [quickEditEnabled, setQuickEditEnabled] = React.useState(false);
+  const [isInTinaIframe, setIsInTinaIframe] = React.useState(false);
   React.useEffect(() => {
     setIsClient(true);
     setData(props.data);
   }, [id]);
+  React.useEffect(() => {
+    if (quickEditEnabled) {
+      let mouseDownHandler = function(e) {
+        const attributeNames = e.target.getAttributeNames();
+        const tinaAttribute = attributeNames.find((name) => name.startsWith("data-tina-field"));
+        let fieldName;
+        if (tinaAttribute) {
+          e.preventDefault();
+          e.stopPropagation();
+          fieldName = e.target.getAttribute(tinaAttribute);
+        } else {
+          const ancestor = e.target.closest("[data-tina-field], [data-tina-field-overlay]");
+          if (ancestor) {
+            const attributeNames2 = ancestor.getAttributeNames();
+            const tinaAttribute2 = attributeNames2.find((name) => name.startsWith("data-tina-field"));
+            if (tinaAttribute2) {
+              e.preventDefault();
+              e.stopPropagation();
+              fieldName = ancestor.getAttribute(tinaAttribute2);
+            }
+          }
+        }
+        if (fieldName) {
+          if (isInTinaIframe) {
+            parent.postMessage({ type: "field:selected", fieldName }, window.location.origin);
+          }
+        }
+      };
+      const style = document.createElement("style");
+      style.type = "text/css";
+      style.textContent = `
+        [data-tina-field] {
+          outline: 2px dashed rgba(34,150,254,0.5);
+          transition: box-shadow ease-out 150ms;
+        }
+        [data-tina-field]:hover {
+          box-shadow: inset 100vi 100vh rgba(34,150,254,0.3);
+          outline: 2px solid rgba(34,150,254,1);
+          cursor: pointer;
+        }
+        [data-tina-field-overlay] {
+          outline: 2px dashed rgba(34,150,254,0.5);
+          position: relative;
+        }
+        [data-tina-field-overlay]:hover {
+          cursor: pointer;
+          outline: 2px solid rgba(34,150,254,1);
+        }
+        [data-tina-field-overlay]::after {
+          content: '';
+          position: absolute;
+          inset: 0;
+          z-index: 20;
+          transition: opacity ease-out 150ms;
+          background-color: rgba(34,150,254,0.3);
+          opacity: 0;
+        }
+        [data-tina-field-overlay]:hover::after {
+          opacity: 1;
+        }
+      `;
+      document.head.appendChild(style);
+      document.body.classList.add("__tina-quick-editing-enabled");
+      document.addEventListener("click", mouseDownHandler, true);
+      return () => {
+        document.removeEventListener("click", mouseDownHandler, true);
+        document.body.classList.remove("__tina-quick-editing-enabled");
+        style.remove();
+      };
+    }
+  }, [quickEditEnabled, isInTinaIframe]);
   React.useEffect(() => {
     parent.postMessage({ type: "open", ...props, id }, window.location.origin);
     window.addEventListener("message", (event) => {
+      if (event.data.type === "quickEditEnabled") {
+        setQuickEditEnabled(event.data.value);
+      }
       if (event.data.id === id && event.data.type === "updateData") {
         setData(event.data.data);
+        setIsInTinaIframe(true);
+        const anyTinaField = document.querySelector("[data-tina-field]");
+        if (anyTinaField) {
+          parent.postMessage({ type: "quick-edit", value: true }, window.location.origin);
+        } else {
+          parent.postMessage({ type: "quick-edit", value: false }, window.location.origin);
+        }
       }
     });
     return () => {
       parent.postMessage({ type: "close", id }, window.location.origin);
     };
-  }, [id]);
+  }, [id, setQuickEditEnabled]);
   return { data, isClient };
 }
 function useEditState() {
@@ -35,16 +122,86 @@ function useEditState() {
   }, []);
   return { edit };
 }
-const tinaField = (obj, field) => {
+const tinaField = (object, property, index) => {
   var _a, _b, _c;
-  if (!field) {
-    return `${(_a = obj._tina_metadata) == null ? void 0 : _a.id}#${(_b = obj._tina_metadata) == null ? void 0 : _b.name}`;
-  }
-  if (obj == null ? void 0 : obj._tina_metadata) {
-    if (typeof field === "string") {
-      return `${(_c = obj._tina_metadata) == null ? void 0 : _c.id}#${obj._tina_metadata.fields[field]}`;
+  if (object._content_source) {
+    if (!property) {
+      return [
+        (_a = object._content_source) == null ? void 0 : _a.queryId,
+        object._content_source.path.join(".")
+      ].join("---");
+    }
+    if (typeof index === "number") {
+      return [
+        (_b = object._content_source) == null ? void 0 : _b.queryId,
+        [...object._content_source.path, property, index].join(".")
+      ].join("---");
     }
+    return [
+      (_c = object._content_source) == null ? void 0 : _c.queryId,
+      [...object._content_source.path, property].join(".")
+    ].join("---");
   }
   return "";
 };
-export { tinaField, useEditState, useTina };
+const addMetadata = (id, object, path) => {
+  Object.entries(object).forEach(([key, value]) => {
+    if (Array.isArray(value)) {
+      value.forEach((item, index) => {
+        if (isScalarOrUndefined(item)) {
+          return;
+        }
+        if (Array.isArray(item)) {
+          return;
+        }
+        const itemObject = item;
+        addMetadata(id, itemObject, [...path, key, index]);
+      });
+    } else {
+      if (isScalarOrUndefined(value)) {
+        return;
+      }
+      const itemObject = value;
+      addMetadata(id, itemObject, [...path, key]);
+    }
+  });
+  if ((object == null ? void 0 : object.type) === "root") {
+    return;
+  }
+  object._content_source = {
+    queryId: id,
+    path
+  };
+  return object;
+};
+function isScalarOrUndefined(value) {
+  const type = typeof value;
+  if (type === "string")
+    return true;
+  if (type === "number")
+    return true;
+  if (type === "boolean")
+    return true;
+  if (type === "undefined")
+    return true;
+  if (value == null)
+    return true;
+  if (value instanceof String)
+    return true;
+  if (value instanceof Number)
+    return true;
+  if (value instanceof Boolean)
+    return true;
+  return false;
+}
+const hashFromQuery = (input) => {
+  let hash = 0;
+  for (let i = 0; i < input.length; i++) {
+    const char = input.charCodeAt(i);
+    hash = (hash << 5) - hash + char & 4294967295;
+  }
+  const nonNegativeHash = Math.abs(hash);
+  const alphanumericHash = nonNegativeHash.toString(36);
+  return alphanumericHash;
+};
+export { addMetadata, hashFromQuery, tinaField, useEditState, useTina };

package/dist/react.js

@@ -7,24 +7,111 @@
   }
   var React__default = /* @__PURE__ */ _interopDefaultLegacy(React);
   function useTina(props) {
+    const stringifiedQuery = JSON.stringify({
+      query: props.query,
+      variables: props.variables
+    });
+    const id = React__default["default"].useMemo(() => hashFromQuery(stringifiedQuery), [stringifiedQuery]);
     const [data, setData] = React__default["default"].useState(props.data);
     const [isClient, setIsClient] = React__default["default"].useState(false);
-    const id = JSON.stringify({ query: props.query, variables: props.variables });
+    const [quickEditEnabled, setQuickEditEnabled] = React__default["default"].useState(false);
+    const [isInTinaIframe, setIsInTinaIframe] = React__default["default"].useState(false);
     React__default["default"].useEffect(() => {
       setIsClient(true);
       setData(props.data);
     }, [id]);
+    React__default["default"].useEffect(() => {
+      if (quickEditEnabled) {
+        let mouseDownHandler = function(e) {
+          const attributeNames = e.target.getAttributeNames();
+          const tinaAttribute = attributeNames.find((name) => name.startsWith("data-tina-field"));
+          let fieldName;
+          if (tinaAttribute) {
+            e.preventDefault();
+            e.stopPropagation();
+            fieldName = e.target.getAttribute(tinaAttribute);
+          } else {
+            const ancestor = e.target.closest("[data-tina-field], [data-tina-field-overlay]");
+            if (ancestor) {
+              const attributeNames2 = ancestor.getAttributeNames();
+              const tinaAttribute2 = attributeNames2.find((name) => name.startsWith("data-tina-field"));
+              if (tinaAttribute2) {
+                e.preventDefault();
+                e.stopPropagation();
+                fieldName = ancestor.getAttribute(tinaAttribute2);
+              }
+            }
+          }
+          if (fieldName) {
+            if (isInTinaIframe) {
+              parent.postMessage({ type: "field:selected", fieldName }, window.location.origin);
+            }
+          }
+        };
+        const style = document.createElement("style");
+        style.type = "text/css";
+        style.textContent = `
+        [data-tina-field] {
+          outline: 2px dashed rgba(34,150,254,0.5);
+          transition: box-shadow ease-out 150ms;
+        }
+        [data-tina-field]:hover {
+          box-shadow: inset 100vi 100vh rgba(34,150,254,0.3);
+          outline: 2px solid rgba(34,150,254,1);
+          cursor: pointer;
+        }
+        [data-tina-field-overlay] {
+          outline: 2px dashed rgba(34,150,254,0.5);
+          position: relative;
+        }
+        [data-tina-field-overlay]:hover {
+          cursor: pointer;
+          outline: 2px solid rgba(34,150,254,1);
+        }
+        [data-tina-field-overlay]::after {
+          content: '';
+          position: absolute;
+          inset: 0;
+          z-index: 20;
+          transition: opacity ease-out 150ms;
+          background-color: rgba(34,150,254,0.3);
+          opacity: 0;
+        }
+        [data-tina-field-overlay]:hover::after {
+          opacity: 1;
+        }
+      `;
+        document.head.appendChild(style);
+        document.body.classList.add("__tina-quick-editing-enabled");
+        document.addEventListener("click", mouseDownHandler, true);
+        return () => {
+          document.removeEventListener("click", mouseDownHandler, true);
+          document.body.classList.remove("__tina-quick-editing-enabled");
+          style.remove();
+        };
+      }
+    }, [quickEditEnabled, isInTinaIframe]);
     React__default["default"].useEffect(() => {
       parent.postMessage({ type: "open", ...props, id }, window.location.origin);
       window.addEventListener("message", (event) => {
+        if (event.data.type === "quickEditEnabled") {
+          setQuickEditEnabled(event.data.value);
+        }
         if (event.data.id === id && event.data.type === "updateData") {
           setData(event.data.data);
+          setIsInTinaIframe(true);
+          const anyTinaField = document.querySelector("[data-tina-field]");
+          if (anyTinaField) {
+            parent.postMessage({ type: "quick-edit", value: true }, window.location.origin);
+          } else {
+            parent.postMessage({ type: "quick-edit", value: false }, window.location.origin);
+          }
         }
       });
       return () => {
         parent.postMessage({ type: "close", id }, window.location.origin);
       };
-    }, [id]);
+    }, [id, setQuickEditEnabled]);
     return { data, isClient };
   }
   function useEditState() {
@@ -42,18 +129,90 @@
     }, []);
     return { edit };
   }
-  const tinaField = (obj, field) => {
+  const tinaField = (object, property, index) => {
     var _a, _b, _c;
-    if (!field) {
-      return `${(_a = obj._tina_metadata) == null ? void 0 : _a.id}#${(_b = obj._tina_metadata) == null ? void 0 : _b.name}`;
-    }
-    if (obj == null ? void 0 : obj._tina_metadata) {
-      if (typeof field === "string") {
-        return `${(_c = obj._tina_metadata) == null ? void 0 : _c.id}#${obj._tina_metadata.fields[field]}`;
+    if (object._content_source) {
+      if (!property) {
+        return [
+          (_a = object._content_source) == null ? void 0 : _a.queryId,
+          object._content_source.path.join(".")
+        ].join("---");
+      }
+      if (typeof index === "number") {
+        return [
+          (_b = object._content_source) == null ? void 0 : _b.queryId,
+          [...object._content_source.path, property, index].join(".")
+        ].join("---");
       }
+      return [
+        (_c = object._content_source) == null ? void 0 : _c.queryId,
+        [...object._content_source.path, property].join(".")
+      ].join("---");
     }
     return "";
   };
+  const addMetadata = (id, object, path) => {
+    Object.entries(object).forEach(([key, value]) => {
+      if (Array.isArray(value)) {
+        value.forEach((item, index) => {
+          if (isScalarOrUndefined(item)) {
+            return;
+          }
+          if (Array.isArray(item)) {
+            return;
+          }
+          const itemObject = item;
+          addMetadata(id, itemObject, [...path, key, index]);
+        });
+      } else {
+        if (isScalarOrUndefined(value)) {
+          return;
+        }
+        const itemObject = value;
+        addMetadata(id, itemObject, [...path, key]);
+      }
+    });
+    if ((object == null ? void 0 : object.type) === "root") {
+      return;
+    }
+    object._content_source = {
+      queryId: id,
+      path
+    };
+    return object;
+  };
+  function isScalarOrUndefined(value) {
+    const type = typeof value;
+    if (type === "string")
+      return true;
+    if (type === "number")
+      return true;
+    if (type === "boolean")
+      return true;
+    if (type === "undefined")
+      return true;
+    if (value == null)
+      return true;
+    if (value instanceof String)
+      return true;
+    if (value instanceof Number)
+      return true;
+    if (value instanceof Boolean)
+      return true;
+    return false;
+  }
+  const hashFromQuery = (input) => {
+    let hash = 0;
+    for (let i = 0; i < input.length; i++) {
+      const char = input.charCodeAt(i);
+      hash = (hash << 5) - hash + char & 4294967295;
+    }
+    const nonNegativeHash = Math.abs(hash);
+    const alphanumericHash = nonNegativeHash.toString(36);
+    return alphanumericHash;
+  };
+  exports2.addMetadata = addMetadata;
+  exports2.hashFromQuery = hashFromQuery;
   exports2.tinaField = tinaField;
   exports2.useEditState = useEditState;
   exports2.useTina = useTina;

package/dist/style.css

@@ -991,6 +991,9 @@
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.tina-tailwind .outline {
+  outline-style: solid;
+}
 .tina-tailwind .ring-1 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinacms",
-  "version": "1.5.5",
+  "version": "1.5.7",
   "main": "dist/index.js",
   "module": "./dist/index.es.js",
   "exports": {
@@ -58,7 +58,7 @@
     "@react-hook/window-size": "^3.0.7",
     "@tinacms/schema-tools": "1.4.4",
     "@tinacms/sharedctx": "1.0.1",
-    "@tinacms/toolkit": "1.7.1",
+    "@tinacms/toolkit": "1.7.3",
     "crypto-js": "^4.0.0",
     "encoding": "0.1.13",
     "fetch-ponyfill": "^7.1.0",
@@ -68,7 +68,7 @@
     "lodash.set": "^4.3.2",
     "prism-react-renderer": "^1.3.5",
     "react-icons": "^4.3.1",
-    "react-router-dom": "6",
+    "react-router-dom": "6.3.0",
     "yup": "^0.32.0",
     "zod": "^3.14.3"
   },