tinacms 1.5.10 → 1.5.11

package/dist/dev-tools.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import type { TinaMarkdownContent } from './rich-text';
+declare type RenderValue = (args: {
+    value: unknown;
+    keyName: string;
+    parentValue: object | object[];
+    parentKeyName: string;
+}) => JSX.Element;
+declare type RenderRichText = (args: {
+    value: TinaMarkdownContent;
+}) => JSX.Element;
+export declare const Explorer: (props: {
+    value: object;
+    renderValue: RenderValue;
+    renderRichText: RenderRichText;
+}) => JSX.Element;
+export declare function Json({ src, withDataTinaFieldState, }: {
+    src: object;
+    withDataTinaFieldState?: boolean;
+}): JSX.Element;
+export {};

package/dist/dev-tools.es.js

@@ -0,0 +1,486 @@
+import React, { useContext, useState, useEffect, Suspense } from "react";
+const TinaMarkdown = ({
+  content,
+  components = {}
+}) => {
+  if (!content) {
+    return null;
+  }
+  const nodes = Array.isArray(content) ? content : content.children;
+  if (!nodes) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, nodes.map((child, index) => {
+    return /* @__PURE__ */ React.createElement(MemoNode, {
+      components,
+      key: index,
+      child
+    });
+  }));
+};
+const Leaf = (props) => {
+  if (props.bold) {
+    const { bold, ...rest } = props;
+    if (props.components.bold) {
+      const Component = props.components.bold;
+      return /* @__PURE__ */ React.createElement(Component, null, /* @__PURE__ */ React.createElement(Leaf, {
+        ...rest
+      }));
+    }
+    return /* @__PURE__ */ React.createElement("strong", null, /* @__PURE__ */ React.createElement(Leaf, {
+      ...rest
+    }));
+  }
+  if (props.italic) {
+    const { italic, ...rest } = props;
+    if (props.components.italic) {
+      const Component = props.components.italic;
+      return /* @__PURE__ */ React.createElement(Component, null, /* @__PURE__ */ React.createElement(Leaf, {
+        ...rest
+      }));
+    }
+    return /* @__PURE__ */ React.createElement("em", null, /* @__PURE__ */ React.createElement(Leaf, {
+      ...rest
+    }));
+  }
+  if (props.underline) {
+    const { underline, ...rest } = props;
+    if (props.components.underline) {
+      const Component = props.components.underline;
+      return /* @__PURE__ */ React.createElement(Component, null, /* @__PURE__ */ React.createElement(Leaf, {
+        ...rest
+      }));
+    }
+    return /* @__PURE__ */ React.createElement("u", null, /* @__PURE__ */ React.createElement(Leaf, {
+      ...rest
+    }));
+  }
+  if (props.strikethrough) {
+    const { strikethrough, ...rest } = props;
+    if (props.components.strikethrough) {
+      const Component = props.components.strikethrough;
+      return /* @__PURE__ */ React.createElement(Component, null, /* @__PURE__ */ React.createElement(Leaf, {
+        ...rest
+      }));
+    }
+    return /* @__PURE__ */ React.createElement("s", null, /* @__PURE__ */ React.createElement(Leaf, {
+      ...rest
+    }));
+  }
+  if (props.code) {
+    const { code, ...rest } = props;
+    if (props.components.code) {
+      const Component = props.components.code;
+      return /* @__PURE__ */ React.createElement(Component, null, /* @__PURE__ */ React.createElement(Leaf, {
+        ...rest
+      }));
+    }
+    return /* @__PURE__ */ React.createElement("code", null, /* @__PURE__ */ React.createElement(Leaf, {
+      ...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) => {
+  const MNode = React.useMemo(() => /* @__PURE__ */ React.createElement(Node, {
+    ...props
+  }), [JSON.stringify(props)]);
+  return MNode;
+};
+const Node = ({ components, child }) => {
+  const { children, ...props } = child;
+  switch (child.type) {
+    case "h1":
+    case "h2":
+    case "h3":
+    case "h4":
+    case "h5":
+    case "h6":
+    case "p":
+    case "blockquote":
+    case "ol":
+    case "ul":
+    case "li":
+      if (components[child.type]) {
+        const Component2 = components[child.type];
+        return /* @__PURE__ */ React.createElement(Component2, {
+          ...props
+        }, /* @__PURE__ */ React.createElement(TinaMarkdown, {
+          components,
+          content: children
+        }));
+      }
+      return React.createElement(child.type, {
+        children: /* @__PURE__ */ React.createElement(TinaMarkdown, {
+          components,
+          content: children
+        })
+      });
+    case "lic":
+      if (components.lic) {
+        const Component2 = components.lic;
+        return /* @__PURE__ */ React.createElement(Component2, {
+          ...props
+        }, /* @__PURE__ */ React.createElement(TinaMarkdown, {
+          components,
+          content: children
+        }));
+      }
+      return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(TinaMarkdown, {
+        components,
+        content: child.children
+      }));
+    case "img":
+      if (components[child.type]) {
+        const Component2 = components[child.type];
+        return /* @__PURE__ */ React.createElement(Component2, {
+          ...props
+        });
+      }
+      return /* @__PURE__ */ React.createElement("img", {
+        src: child.url,
+        alt: child.caption
+      });
+    case "a":
+      if (components[child.type]) {
+        const Component2 = components[child.type];
+        return /* @__PURE__ */ React.createElement(Component2, {
+          ...props
+        }, /* @__PURE__ */ React.createElement(TinaMarkdown, {
+          components,
+          content: children
+        }));
+      }
+      return /* @__PURE__ */ React.createElement("a", {
+        href: child.url
+      }, /* @__PURE__ */ React.createElement(TinaMarkdown, {
+        components,
+        content: children
+      }));
+    case "code_block":
+      const value = child.value;
+      if (components[child.type]) {
+        const Component2 = components[child.type];
+        return /* @__PURE__ */ React.createElement(Component2, {
+          ...props
+        });
+      }
+      return /* @__PURE__ */ React.createElement("pre", null, /* @__PURE__ */ React.createElement("code", null, value));
+    case "hr":
+      if (components[child.type]) {
+        const Component2 = components[child.type];
+        return /* @__PURE__ */ React.createElement(Component2, {
+          ...props
+        });
+      }
+      return /* @__PURE__ */ React.createElement("hr", null);
+    case "break":
+      if (components[child.type]) {
+        const Component2 = components[child.type];
+        return /* @__PURE__ */ React.createElement(Component2, {
+          ...props
+        });
+      }
+      return /* @__PURE__ */ React.createElement("br", null);
+    case "text":
+      return /* @__PURE__ */ React.createElement(Leaf, {
+        components,
+        ...child
+      });
+    case "mdxJsxTextElement":
+    case "mdxJsxFlowElement":
+      const Component = components[child.name];
+      if (Component) {
+        const props2 = child.props ? child.props : {};
+        return /* @__PURE__ */ React.createElement(Component, {
+          ...props2
+        });
+      } else {
+        const ComponentMissing = components["component_missing"];
+        if (ComponentMissing) {
+          return /* @__PURE__ */ React.createElement(ComponentMissing, {
+            name: child.name
+          });
+        } else {
+          return /* @__PURE__ */ React.createElement("span", null, `No component provided for ${child.name}`);
+        }
+      }
+    case "maybe_mdx":
+      return null;
+    case "html":
+    case "html_inline":
+      if (components[child.type]) {
+        const Component2 = components[child.type];
+        return /* @__PURE__ */ React.createElement(Component2, {
+          ...props
+        });
+      }
+      return child.value;
+    case "invalid_markdown":
+      return /* @__PURE__ */ React.createElement("pre", null, child.value);
+    default:
+      if (typeof child.text === "string") {
+        return /* @__PURE__ */ React.createElement(Leaf, {
+          components,
+          ...child
+        });
+      }
+  }
+};
+const tinaField = (object, property, index) => {
+  var _a, _b, _c;
+  if (!object) {
+    return "";
+  }
+  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 Explorer = (props) => {
+  return /* @__PURE__ */ React.createElement("div", {
+    className: "font-mono"
+  }, /* @__PURE__ */ React.createElement(ObjectValueRenderer, {
+    ...props
+  }));
+};
+const ObjectValueRenderer = (props) => {
+  const subEntries = Object.entries(props.value).map(([keyName, subValue]) => {
+    return /* @__PURE__ */ React.createElement("div", {
+      key: keyName,
+      className: "gap-2"
+    }, /* @__PURE__ */ React.createElement(UnknownRenderer, {
+      keyName,
+      value: subValue,
+      parentValue: props.value,
+      parentKeyName: props.parentKeyName,
+      renderValue: props.renderValue,
+      renderRichText: props.renderRichText,
+      showMetaFields: props.showMetaFields
+    }));
+  });
+  return /* @__PURE__ */ React.createElement("div", null, subEntries);
+};
+const UnknownRenderer = ({
+  keyName,
+  value,
+  parentValue,
+  parentKeyName,
+  renderValue,
+  renderRichText,
+  showMetaFields
+}) => {
+  const typeOfValue = typeof value;
+  const [expanded, setExpanded] = React.useState((value == null ? void 0 : value.type) === "root" ? false : true);
+  if (!showMetaFields) {
+    if ([
+      "_sys",
+      "__typename",
+      "_internalValues",
+      "_internalSys"
+    ].includes(keyName)) {
+      return;
+    }
+  }
+  if (Array.isArray(value)) {
+    return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("button", {
+      onClick: () => setExpanded((exp) => !exp),
+      className: "min-w-[48px] flex justify-start gap-2"
+    }, keyName, ": ", "[", !expanded && `...]`), expanded && /* @__PURE__ */ React.createElement("div", {
+      className: "pl-4"
+    }, value.map((item, index) => /* @__PURE__ */ React.createElement(UnknownRenderer, {
+      key: String(index),
+      keyName: String(index),
+      value: item,
+      parentKeyName: keyName,
+      parentValue,
+      renderValue,
+      renderRichText
+    }))), expanded && /* @__PURE__ */ React.createElement("div", null, "]"));
+  }
+  if (typeOfValue === "object") {
+    if ((value == null ? void 0 : value.type) === "root" && renderRichText) {
+      return /* @__PURE__ */ React.createElement("div", {
+        className: "flex gap-2"
+      }, /* @__PURE__ */ React.createElement("button", {
+        onClick: () => setExpanded((exp) => !exp),
+        className: "min-w-[48px] flex justify-start gap-2"
+      }, keyName, ": ", !expanded && "{...}"), /* @__PURE__ */ React.createElement("div", null, expanded && renderRichText({ value, keyName, parentValue, parentKeyName })));
+    }
+    return /* @__PURE__ */ React.createElement(ObjectRenderer, {
+      keyName,
+      value,
+      parentValue,
+      parentKeyName,
+      renderValue,
+      renderRichText
+    });
+  }
+  return /* @__PURE__ */ React.createElement(Value, {
+    keyName,
+    value,
+    parentValue,
+    parentKeyName,
+    renderValue
+  });
+};
+const Value = ({
+  keyName,
+  value,
+  parentValue,
+  parentKeyName,
+  renderValue
+}) => {
+  const keyDisplay = isNaN(Number(keyName)) ? `${keyName}: ` : ``;
+  return /* @__PURE__ */ React.createElement("div", {
+    className: "flex gap-2"
+  }, /* @__PURE__ */ React.createElement("div", null, keyDisplay), /* @__PURE__ */ React.createElement("div", null, renderValue({ value, keyName, parentValue, parentKeyName })));
+};
+const ObjectRenderer = ({
+  keyName,
+  value,
+  parentValue,
+  parentKeyName,
+  renderValue,
+  renderRichText
+}) => {
+  const { withDataTinaFieldState } = useContext(JsonContext);
+  const [showMetaFields, setShowMetaFields] = React.useState(false);
+  const [expanded, setExpanded] = React.useState(true);
+  const v = value;
+  const keyDisplay = isNaN(Number(keyName)) ? `${keyName}: ` : ``;
+  if (value === null) {
+    return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", {
+      className: "flex gap-2"
+    }, /* @__PURE__ */ React.createElement("div", {
+      className: ""
+    }, keyDisplay), /* @__PURE__ */ React.createElement("div", {
+      className: "text-gray-400"
+    }, "null")));
+  } else {
+    const fieldName = tinaField(v);
+    const extraProps = {};
+    if (fieldName !== "undefined#undefined" && withDataTinaFieldState) {
+      extraProps["data-tina-field"] = fieldName;
+    }
+    return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", {
+      className: "flex justify-between"
+    }, /* @__PURE__ */ React.createElement("button", {
+      onClick: () => setExpanded((exp) => !exp),
+      className: "min-w-[48px] flex justify-start gap-2"
+    }, keyDisplay, "{", !expanded && `...}`), expanded && /* @__PURE__ */ React.createElement("button", {
+      onClick: () => {
+        setShowMetaFields((show) => !show);
+      },
+      className: "min-w-[48px] text-sm text-gray-400"
+    }, showMetaFields ? "Hide meta fields" : "Show meta fields")), expanded && /* @__PURE__ */ React.createElement("div", {
+      className: "pl-4",
+      ...extraProps
+    }, /* @__PURE__ */ React.createElement(ObjectValueRenderer, {
+      value: v,
+      parentValue,
+      parentKeyName,
+      renderValue,
+      renderRichText,
+      showMetaFields
+    })), expanded && /* @__PURE__ */ React.createElement("div", null, "}"));
+  }
+};
+const JsonContext = React.createContext({ withDataTinaFieldState: true });
+function Json({
+  src,
+  withDataTinaFieldState = true
+}) {
+  const [isClient, setIsClient] = useState(false);
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+  if (!isClient) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(Suspense, {
+    fallback: /* @__PURE__ */ React.createElement("div", {
+      className: ""
+    }, "Loading...")
+  }, /* @__PURE__ */ React.createElement(JsonContext.Provider, {
+    value: {
+      withDataTinaFieldState: withDataTinaFieldState === false ? false : true
+    }
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "px-4"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "mx-auto my-8 border rounded-lg p-8 shadow-lg max-w-5xl mx-auto shadow-lg"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "h-full overflow-scroll"
+  }, /* @__PURE__ */ React.createElement(Explorer, {
+    value: src,
+    renderRichText: ({
+      value,
+      keyName,
+      parentValue,
+      parentKeyName
+    }) => {
+      let fieldName = "";
+      if (!isNaN(Number(keyName))) {
+        fieldName = `${tinaField(parentValue, parentKeyName)}.${keyName}`;
+      } else {
+        fieldName = tinaField(parentValue, keyName);
+      }
+      const extraProps = {};
+      if (fieldName !== "undefined#undefined") {
+        if (fieldName && withDataTinaFieldState) {
+          extraProps["data-tina-field"] = fieldName;
+        }
+      }
+      return /* @__PURE__ */ React.createElement("div", {
+        className: "font-sans px-2 border-l-2 bg-gray-50 w-full prose",
+        ...extraProps
+      }, /* @__PURE__ */ React.createElement(TinaMarkdown, {
+        content: value
+      }));
+    },
+    renderValue: ({
+      value,
+      keyName,
+      parentValue,
+      parentKeyName
+    }) => {
+      let fieldName = "";
+      if (!isNaN(Number(keyName))) {
+        fieldName = `${tinaField(parentValue, parentKeyName)}.${keyName}`;
+      } else {
+        fieldName = tinaField(parentValue, keyName);
+      }
+      const extraProps = {};
+      if (fieldName !== "undefined#undefined") {
+        if (fieldName && withDataTinaFieldState) {
+          extraProps["data-tina-field"] = fieldName;
+        }
+      }
+      return /* @__PURE__ */ React.createElement("span", {
+        className: "text-orange-600",
+        ...extraProps
+      }, value);
+    }
+  }))))));
+}
+export { Explorer, Json };

package/dist/dev-tools.js

@@ -0,0 +1,496 @@
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react")) : typeof define === "function" && define.amd ? define(["exports", "react"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinacms = {}, global.NOOP));
+})(this, function(exports2, React) {
+  "use strict";
+  function _interopDefaultLegacy(e) {
+    return e && typeof e === "object" && "default" in e ? e : { "default": e };
+  }
+  var React__default = /* @__PURE__ */ _interopDefaultLegacy(React);
+  const TinaMarkdown = ({
+    content,
+    components = {}
+  }) => {
+    if (!content) {
+      return null;
+    }
+    const nodes = Array.isArray(content) ? content : content.children;
+    if (!nodes) {
+      return null;
+    }
+    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, nodes.map((child, index) => {
+      return /* @__PURE__ */ React__default["default"].createElement(MemoNode, {
+        components,
+        key: index,
+        child
+      });
+    }));
+  };
+  const Leaf = (props) => {
+    if (props.bold) {
+      const { bold, ...rest } = props;
+      if (props.components.bold) {
+        const Component = props.components.bold;
+        return /* @__PURE__ */ React__default["default"].createElement(Component, null, /* @__PURE__ */ React__default["default"].createElement(Leaf, {
+          ...rest
+        }));
+      }
+      return /* @__PURE__ */ React__default["default"].createElement("strong", null, /* @__PURE__ */ React__default["default"].createElement(Leaf, {
+        ...rest
+      }));
+    }
+    if (props.italic) {
+      const { italic, ...rest } = props;
+      if (props.components.italic) {
+        const Component = props.components.italic;
+        return /* @__PURE__ */ React__default["default"].createElement(Component, null, /* @__PURE__ */ React__default["default"].createElement(Leaf, {
+          ...rest
+        }));
+      }
+      return /* @__PURE__ */ React__default["default"].createElement("em", null, /* @__PURE__ */ React__default["default"].createElement(Leaf, {
+        ...rest
+      }));
+    }
+    if (props.underline) {
+      const { underline, ...rest } = props;
+      if (props.components.underline) {
+        const Component = props.components.underline;
+        return /* @__PURE__ */ React__default["default"].createElement(Component, null, /* @__PURE__ */ React__default["default"].createElement(Leaf, {
+          ...rest
+        }));
+      }
+      return /* @__PURE__ */ React__default["default"].createElement("u", null, /* @__PURE__ */ React__default["default"].createElement(Leaf, {
+        ...rest
+      }));
+    }
+    if (props.strikethrough) {
+      const { strikethrough, ...rest } = props;
+      if (props.components.strikethrough) {
+        const Component = props.components.strikethrough;
+        return /* @__PURE__ */ React__default["default"].createElement(Component, null, /* @__PURE__ */ React__default["default"].createElement(Leaf, {
+          ...rest
+        }));
+      }
+      return /* @__PURE__ */ React__default["default"].createElement("s", null, /* @__PURE__ */ React__default["default"].createElement(Leaf, {
+        ...rest
+      }));
+    }
+    if (props.code) {
+      const { code, ...rest } = props;
+      if (props.components.code) {
+        const Component = props.components.code;
+        return /* @__PURE__ */ React__default["default"].createElement(Component, null, /* @__PURE__ */ React__default["default"].createElement(Leaf, {
+          ...rest
+        }));
+      }
+      return /* @__PURE__ */ React__default["default"].createElement("code", null, /* @__PURE__ */ React__default["default"].createElement(Leaf, {
+        ...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) => {
+    const MNode = React__default["default"].useMemo(() => /* @__PURE__ */ React__default["default"].createElement(Node, {
+      ...props
+    }), [JSON.stringify(props)]);
+    return MNode;
+  };
+  const Node = ({ components, child }) => {
+    const { children, ...props } = child;
+    switch (child.type) {
+      case "h1":
+      case "h2":
+      case "h3":
+      case "h4":
+      case "h5":
+      case "h6":
+      case "p":
+      case "blockquote":
+      case "ol":
+      case "ul":
+      case "li":
+        if (components[child.type]) {
+          const Component2 = components[child.type];
+          return /* @__PURE__ */ React__default["default"].createElement(Component2, {
+            ...props
+          }, /* @__PURE__ */ React__default["default"].createElement(TinaMarkdown, {
+            components,
+            content: children
+          }));
+        }
+        return React__default["default"].createElement(child.type, {
+          children: /* @__PURE__ */ React__default["default"].createElement(TinaMarkdown, {
+            components,
+            content: children
+          })
+        });
+      case "lic":
+        if (components.lic) {
+          const Component2 = components.lic;
+          return /* @__PURE__ */ React__default["default"].createElement(Component2, {
+            ...props
+          }, /* @__PURE__ */ React__default["default"].createElement(TinaMarkdown, {
+            components,
+            content: children
+          }));
+        }
+        return /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement(TinaMarkdown, {
+          components,
+          content: child.children
+        }));
+      case "img":
+        if (components[child.type]) {
+          const Component2 = components[child.type];
+          return /* @__PURE__ */ React__default["default"].createElement(Component2, {
+            ...props
+          });
+        }
+        return /* @__PURE__ */ React__default["default"].createElement("img", {
+          src: child.url,
+          alt: child.caption
+        });
+      case "a":
+        if (components[child.type]) {
+          const Component2 = components[child.type];
+          return /* @__PURE__ */ React__default["default"].createElement(Component2, {
+            ...props
+          }, /* @__PURE__ */ React__default["default"].createElement(TinaMarkdown, {
+            components,
+            content: children
+          }));
+        }
+        return /* @__PURE__ */ React__default["default"].createElement("a", {
+          href: child.url
+        }, /* @__PURE__ */ React__default["default"].createElement(TinaMarkdown, {
+          components,
+          content: children
+        }));
+      case "code_block":
+        const value = child.value;
+        if (components[child.type]) {
+          const Component2 = components[child.type];
+          return /* @__PURE__ */ React__default["default"].createElement(Component2, {
+            ...props
+          });
+        }
+        return /* @__PURE__ */ React__default["default"].createElement("pre", null, /* @__PURE__ */ React__default["default"].createElement("code", null, value));
+      case "hr":
+        if (components[child.type]) {
+          const Component2 = components[child.type];
+          return /* @__PURE__ */ React__default["default"].createElement(Component2, {
+            ...props
+          });
+        }
+        return /* @__PURE__ */ React__default["default"].createElement("hr", null);
+      case "break":
+        if (components[child.type]) {
+          const Component2 = components[child.type];
+          return /* @__PURE__ */ React__default["default"].createElement(Component2, {
+            ...props
+          });
+        }
+        return /* @__PURE__ */ React__default["default"].createElement("br", null);
+      case "text":
+        return /* @__PURE__ */ React__default["default"].createElement(Leaf, {
+          components,
+          ...child
+        });
+      case "mdxJsxTextElement":
+      case "mdxJsxFlowElement":
+        const Component = components[child.name];
+        if (Component) {
+          const props2 = child.props ? child.props : {};
+          return /* @__PURE__ */ React__default["default"].createElement(Component, {
+            ...props2
+          });
+        } else {
+          const ComponentMissing = components["component_missing"];
+          if (ComponentMissing) {
+            return /* @__PURE__ */ React__default["default"].createElement(ComponentMissing, {
+              name: child.name
+            });
+          } else {
+            return /* @__PURE__ */ React__default["default"].createElement("span", null, `No component provided for ${child.name}`);
+          }
+        }
+      case "maybe_mdx":
+        return null;
+      case "html":
+      case "html_inline":
+        if (components[child.type]) {
+          const Component2 = components[child.type];
+          return /* @__PURE__ */ React__default["default"].createElement(Component2, {
+            ...props
+          });
+        }
+        return child.value;
+      case "invalid_markdown":
+        return /* @__PURE__ */ React__default["default"].createElement("pre", null, child.value);
+      default:
+        if (typeof child.text === "string") {
+          return /* @__PURE__ */ React__default["default"].createElement(Leaf, {
+            components,
+            ...child
+          });
+        }
+    }
+  };
+  const tinaField = (object, property, index) => {
+    var _a, _b, _c;
+    if (!object) {
+      return "";
+    }
+    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 Explorer = (props) => {
+    return /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "font-mono"
+    }, /* @__PURE__ */ React__default["default"].createElement(ObjectValueRenderer, {
+      ...props
+    }));
+  };
+  const ObjectValueRenderer = (props) => {
+    const subEntries = Object.entries(props.value).map(([keyName, subValue]) => {
+      return /* @__PURE__ */ React__default["default"].createElement("div", {
+        key: keyName,
+        className: "gap-2"
+      }, /* @__PURE__ */ React__default["default"].createElement(UnknownRenderer, {
+        keyName,
+        value: subValue,
+        parentValue: props.value,
+        parentKeyName: props.parentKeyName,
+        renderValue: props.renderValue,
+        renderRichText: props.renderRichText,
+        showMetaFields: props.showMetaFields
+      }));
+    });
+    return /* @__PURE__ */ React__default["default"].createElement("div", null, subEntries);
+  };
+  const UnknownRenderer = ({
+    keyName,
+    value,
+    parentValue,
+    parentKeyName,
+    renderValue,
+    renderRichText,
+    showMetaFields
+  }) => {
+    const typeOfValue = typeof value;
+    const [expanded, setExpanded] = React__default["default"].useState((value == null ? void 0 : value.type) === "root" ? false : true);
+    if (!showMetaFields) {
+      if ([
+        "_sys",
+        "__typename",
+        "_internalValues",
+        "_internalSys"
+      ].includes(keyName)) {
+        return;
+      }
+    }
+    if (Array.isArray(value)) {
+      return /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement("button", {
+        onClick: () => setExpanded((exp) => !exp),
+        className: "min-w-[48px] flex justify-start gap-2"
+      }, keyName, ": ", "[", !expanded && `...]`), expanded && /* @__PURE__ */ React__default["default"].createElement("div", {
+        className: "pl-4"
+      }, value.map((item, index) => /* @__PURE__ */ React__default["default"].createElement(UnknownRenderer, {
+        key: String(index),
+        keyName: String(index),
+        value: item,
+        parentKeyName: keyName,
+        parentValue,
+        renderValue,
+        renderRichText
+      }))), expanded && /* @__PURE__ */ React__default["default"].createElement("div", null, "]"));
+    }
+    if (typeOfValue === "object") {
+      if ((value == null ? void 0 : value.type) === "root" && renderRichText) {
+        return /* @__PURE__ */ React__default["default"].createElement("div", {
+          className: "flex gap-2"
+        }, /* @__PURE__ */ React__default["default"].createElement("button", {
+          onClick: () => setExpanded((exp) => !exp),
+          className: "min-w-[48px] flex justify-start gap-2"
+        }, keyName, ": ", !expanded && "{...}"), /* @__PURE__ */ React__default["default"].createElement("div", null, expanded && renderRichText({ value, keyName, parentValue, parentKeyName })));
+      }
+      return /* @__PURE__ */ React__default["default"].createElement(ObjectRenderer, {
+        keyName,
+        value,
+        parentValue,
+        parentKeyName,
+        renderValue,
+        renderRichText
+      });
+    }
+    return /* @__PURE__ */ React__default["default"].createElement(Value, {
+      keyName,
+      value,
+      parentValue,
+      parentKeyName,
+      renderValue
+    });
+  };
+  const Value = ({
+    keyName,
+    value,
+    parentValue,
+    parentKeyName,
+    renderValue
+  }) => {
+    const keyDisplay = isNaN(Number(keyName)) ? `${keyName}: ` : ``;
+    return /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "flex gap-2"
+    }, /* @__PURE__ */ React__default["default"].createElement("div", null, keyDisplay), /* @__PURE__ */ React__default["default"].createElement("div", null, renderValue({ value, keyName, parentValue, parentKeyName })));
+  };
+  const ObjectRenderer = ({
+    keyName,
+    value,
+    parentValue,
+    parentKeyName,
+    renderValue,
+    renderRichText
+  }) => {
+    const { withDataTinaFieldState } = React.useContext(JsonContext);
+    const [showMetaFields, setShowMetaFields] = React__default["default"].useState(false);
+    const [expanded, setExpanded] = React__default["default"].useState(true);
+    const v = value;
+    const keyDisplay = isNaN(Number(keyName)) ? `${keyName}: ` : ``;
+    if (value === null) {
+      return /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement("div", {
+        className: "flex gap-2"
+      }, /* @__PURE__ */ React__default["default"].createElement("div", {
+        className: ""
+      }, keyDisplay), /* @__PURE__ */ React__default["default"].createElement("div", {
+        className: "text-gray-400"
+      }, "null")));
+    } else {
+      const fieldName = tinaField(v);
+      const extraProps = {};
+      if (fieldName !== "undefined#undefined" && withDataTinaFieldState) {
+        extraProps["data-tina-field"] = fieldName;
+      }
+      return /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement("div", {
+        className: "flex justify-between"
+      }, /* @__PURE__ */ React__default["default"].createElement("button", {
+        onClick: () => setExpanded((exp) => !exp),
+        className: "min-w-[48px] flex justify-start gap-2"
+      }, keyDisplay, "{", !expanded && `...}`), expanded && /* @__PURE__ */ React__default["default"].createElement("button", {
+        onClick: () => {
+          setShowMetaFields((show) => !show);
+        },
+        className: "min-w-[48px] text-sm text-gray-400"
+      }, showMetaFields ? "Hide meta fields" : "Show meta fields")), expanded && /* @__PURE__ */ React__default["default"].createElement("div", {
+        className: "pl-4",
+        ...extraProps
+      }, /* @__PURE__ */ React__default["default"].createElement(ObjectValueRenderer, {
+        value: v,
+        parentValue,
+        parentKeyName,
+        renderValue,
+        renderRichText,
+        showMetaFields
+      })), expanded && /* @__PURE__ */ React__default["default"].createElement("div", null, "}"));
+    }
+  };
+  const JsonContext = React__default["default"].createContext({ withDataTinaFieldState: true });
+  function Json({
+    src,
+    withDataTinaFieldState = true
+  }) {
+    const [isClient, setIsClient] = React.useState(false);
+    React.useEffect(() => {
+      setIsClient(true);
+    }, []);
+    if (!isClient) {
+      return null;
+    }
+    return /* @__PURE__ */ React__default["default"].createElement(React.Suspense, {
+      fallback: /* @__PURE__ */ React__default["default"].createElement("div", {
+        className: ""
+      }, "Loading...")
+    }, /* @__PURE__ */ React__default["default"].createElement(JsonContext.Provider, {
+      value: {
+        withDataTinaFieldState: withDataTinaFieldState === false ? false : true
+      }
+    }, /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "px-4"
+    }, /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "mx-auto my-8 border rounded-lg p-8 shadow-lg max-w-5xl mx-auto shadow-lg"
+    }, /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "h-full overflow-scroll"
+    }, /* @__PURE__ */ React__default["default"].createElement(Explorer, {
+      value: src,
+      renderRichText: ({
+        value,
+        keyName,
+        parentValue,
+        parentKeyName
+      }) => {
+        let fieldName = "";
+        if (!isNaN(Number(keyName))) {
+          fieldName = `${tinaField(parentValue, parentKeyName)}.${keyName}`;
+        } else {
+          fieldName = tinaField(parentValue, keyName);
+        }
+        const extraProps = {};
+        if (fieldName !== "undefined#undefined") {
+          if (fieldName && withDataTinaFieldState) {
+            extraProps["data-tina-field"] = fieldName;
+          }
+        }
+        return /* @__PURE__ */ React__default["default"].createElement("div", {
+          className: "font-sans px-2 border-l-2 bg-gray-50 w-full prose",
+          ...extraProps
+        }, /* @__PURE__ */ React__default["default"].createElement(TinaMarkdown, {
+          content: value
+        }));
+      },
+      renderValue: ({
+        value,
+        keyName,
+        parentValue,
+        parentKeyName
+      }) => {
+        let fieldName = "";
+        if (!isNaN(Number(keyName))) {
+          fieldName = `${tinaField(parentValue, parentKeyName)}.${keyName}`;
+        } else {
+          fieldName = tinaField(parentValue, keyName);
+        }
+        const extraProps = {};
+        if (fieldName !== "undefined#undefined") {
+          if (fieldName && withDataTinaFieldState) {
+            extraProps["data-tina-field"] = fieldName;
+          }
+        }
+        return /* @__PURE__ */ React__default["default"].createElement("span", {
+          className: "text-orange-600",
+          ...extraProps
+        }, value);
+      }
+    }))))));
+  }
+  exports2.Explorer = Explorer;
+  exports2.Json = Json;
+  Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+});

package/dist/index.es.js

@@ -1621,6 +1621,10 @@ var styles = `.tina-tailwind {
   margin-left: auto;
   margin-right: auto;
 }
+.tina-tailwind .my-8 {
+  margin-top: 32px;
+  margin-bottom: 32px;
+}
 .tina-tailwind .-ml-px {
   margin-left: -1px;
 }
@@ -1738,9 +1742,15 @@ var styles = `.tina-tailwind {
 .tina-tailwind .min-w-\\[200px\\] {
   min-width: 200px;
 }
+.tina-tailwind .min-w-\\[48px\\] {
+  min-width: 48px;
+}
 .tina-tailwind .max-w-0 {
   max-width: 0rem;
 }
+.tina-tailwind .max-w-5xl {
+  max-width: 64rem;
+}
 .tina-tailwind .max-w-form {
   max-width: 900px;
 }
@@ -1872,6 +1882,9 @@ var styles = `.tina-tailwind {
 .tina-tailwind .overflow-hidden {
   overflow: hidden;
 }
+.tina-tailwind .overflow-scroll {
+  overflow: scroll;
+}
 .tina-tailwind .overflow-y-auto {
   overflow-y: auto;
 }
@@ -1911,6 +1924,9 @@ var styles = `.tina-tailwind {
 .tina-tailwind .border-b {
   border-bottom-width: 1px;
 }
+.tina-tailwind .border-l-2 {
+  border-left-width: 2px;
+}
 .tina-tailwind .border-r {
   border-right-width: 1px;
 }
@@ -1988,10 +2004,17 @@ var styles = `.tina-tailwind {
 .tina-tailwind .p-0 {
   padding: 0px;
 }
+.tina-tailwind .p-8 {
+  padding: 32px;
+}
 .tina-tailwind .px-12 {
   padding-left: 48px;
   padding-right: 48px;
 }
+.tina-tailwind .px-2 {
+  padding-left: 8px;
+  padding-right: 8px;
+}
 .tina-tailwind .px-20 {
   padding-left: 80px;
   padding-right: 80px;
@@ -2050,6 +2073,9 @@ var styles = `.tina-tailwind {
 .tina-tailwind .pl-3 {
   padding-left: 12px;
 }
+.tina-tailwind .pl-4 {
+  padding-left: 16px;
+}
 .tina-tailwind .pl-5 {
   padding-left: 20px;
 }
@@ -2077,6 +2103,9 @@ var styles = `.tina-tailwind {
 .tina-tailwind .text-center {
   text-align: center;
 }
+.tina-tailwind .font-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
 .tina-tailwind .font-sans {
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
@@ -2175,6 +2204,10 @@ var styles = `.tina-tailwind {
   --tw-text-opacity: 1;
   color: rgb(37 35 54 / var(--tw-text-opacity));
 }
+.tina-tailwind .text-orange-600 {
+  --tw-text-opacity: 1;
+  color: rgb(220 68 25 / var(--tw-text-opacity));
+}
 .tina-tailwind .text-red-400 {
   --tw-text-opacity: 1;
   color: rgb(248 113 113 / var(--tw-text-opacity));
@@ -3672,6 +3705,8 @@ const CollectionListPage = () => {
     }));
     setEndCursor("");
     setPrevCursors([]);
+    setSearch("");
+    setSearchInput("");
   }, [loc]);
   useEffect(() => {
     setVars((old) => ({

package/dist/index.js

@@ -1636,6 +1636,10 @@ mutation addPendingDocumentMutation(
   margin-left: auto;
   margin-right: auto;
 }
+.tina-tailwind .my-8 {
+  margin-top: 32px;
+  margin-bottom: 32px;
+}
 .tina-tailwind .-ml-px {
   margin-left: -1px;
 }
@@ -1753,9 +1757,15 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .min-w-\\[200px\\] {
   min-width: 200px;
 }
+.tina-tailwind .min-w-\\[48px\\] {
+  min-width: 48px;
+}
 .tina-tailwind .max-w-0 {
   max-width: 0rem;
 }
+.tina-tailwind .max-w-5xl {
+  max-width: 64rem;
+}
 .tina-tailwind .max-w-form {
   max-width: 900px;
 }
@@ -1887,6 +1897,9 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .overflow-hidden {
   overflow: hidden;
 }
+.tina-tailwind .overflow-scroll {
+  overflow: scroll;
+}
 .tina-tailwind .overflow-y-auto {
   overflow-y: auto;
 }
@@ -1926,6 +1939,9 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .border-b {
   border-bottom-width: 1px;
 }
+.tina-tailwind .border-l-2 {
+  border-left-width: 2px;
+}
 .tina-tailwind .border-r {
   border-right-width: 1px;
 }
@@ -2003,10 +2019,17 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .p-0 {
   padding: 0px;
 }
+.tina-tailwind .p-8 {
+  padding: 32px;
+}
 .tina-tailwind .px-12 {
   padding-left: 48px;
   padding-right: 48px;
 }
+.tina-tailwind .px-2 {
+  padding-left: 8px;
+  padding-right: 8px;
+}
 .tina-tailwind .px-20 {
   padding-left: 80px;
   padding-right: 80px;
@@ -2065,6 +2088,9 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .pl-3 {
   padding-left: 12px;
 }
+.tina-tailwind .pl-4 {
+  padding-left: 16px;
+}
 .tina-tailwind .pl-5 {
   padding-left: 20px;
 }
@@ -2092,6 +2118,9 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .text-center {
   text-align: center;
 }
+.tina-tailwind .font-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
 .tina-tailwind .font-sans {
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
@@ -2190,6 +2219,10 @@ mutation addPendingDocumentMutation(
   --tw-text-opacity: 1;
   color: rgb(37 35 54 / var(--tw-text-opacity));
 }
+.tina-tailwind .text-orange-600 {
+  --tw-text-opacity: 1;
+  color: rgb(220 68 25 / var(--tw-text-opacity));
+}
 .tina-tailwind .text-red-400 {
   --tw-text-opacity: 1;
   color: rgb(248 113 113 / var(--tw-text-opacity));
@@ -3687,6 +3720,8 @@ This will work when developing locally but NOT when deployed to production.
       }));
       setEndCursor("");
       setPrevCursors([]);
+      setSearch("");
+      setSearchInput("");
     }, [loc]);
     React.useEffect(() => {
       setVars((old) => ({

package/dist/react.d.ts

@@ -19,7 +19,7 @@ export declare const tinaField: <T extends object & {
         queryId: string;
         path: (number | string)[];
     };
-}>(object: T, property?: Exclude<keyof T, "__typename" | "_sys">, index?: number) => string;
+}>(object: T, property?: Exclude<keyof NonNullable<T>, "__typename" | "_sys">, index?: number) => string;
 export declare const addMetadata: <T extends object>(id: string, object: T & {
     type?: string;
     _content_source?: unknown;

package/dist/react.es.js

@@ -124,6 +124,9 @@ function useEditState() {
 }
 const tinaField = (object, property, index) => {
   var _a, _b, _c;
+  if (!object) {
+    return "";
+  }
   if (object._content_source) {
     if (!property) {
       return [

package/dist/react.js

@@ -131,6 +131,9 @@
   }
   const tinaField = (object, property, index) => {
     var _a, _b, _c;
+    if (!object) {
+      return "";
+    }
     if (object._content_source) {
       if (!property) {
         return [

package/dist/style.css

@@ -375,6 +375,10 @@
   margin-left: auto;
   margin-right: auto;
 }
+.tina-tailwind .my-8 {
+  margin-top: 32px;
+  margin-bottom: 32px;
+}
 .tina-tailwind .-ml-px {
   margin-left: -1px;
 }
@@ -492,9 +496,15 @@
 .tina-tailwind .min-w-\[200px\] {
   min-width: 200px;
 }
+.tina-tailwind .min-w-\[48px\] {
+  min-width: 48px;
+}
 .tina-tailwind .max-w-0 {
   max-width: 0rem;
 }
+.tina-tailwind .max-w-5xl {
+  max-width: 64rem;
+}
 .tina-tailwind .max-w-form {
   max-width: 900px;
 }
@@ -626,6 +636,9 @@
 .tina-tailwind .overflow-hidden {
   overflow: hidden;
 }
+.tina-tailwind .overflow-scroll {
+  overflow: scroll;
+}
 .tina-tailwind .overflow-y-auto {
   overflow-y: auto;
 }
@@ -665,6 +678,9 @@
 .tina-tailwind .border-b {
   border-bottom-width: 1px;
 }
+.tina-tailwind .border-l-2 {
+  border-left-width: 2px;
+}
 .tina-tailwind .border-r {
   border-right-width: 1px;
 }
@@ -742,10 +758,17 @@
 .tina-tailwind .p-0 {
   padding: 0px;
 }
+.tina-tailwind .p-8 {
+  padding: 32px;
+}
 .tina-tailwind .px-12 {
   padding-left: 48px;
   padding-right: 48px;
 }
+.tina-tailwind .px-2 {
+  padding-left: 8px;
+  padding-right: 8px;
+}
 .tina-tailwind .px-20 {
   padding-left: 80px;
   padding-right: 80px;
@@ -804,6 +827,9 @@
 .tina-tailwind .pl-3 {
   padding-left: 12px;
 }
+.tina-tailwind .pl-4 {
+  padding-left: 16px;
+}
 .tina-tailwind .pl-5 {
   padding-left: 20px;
 }
@@ -831,6 +857,9 @@
 .tina-tailwind .text-center {
   text-align: center;
 }
+.tina-tailwind .font-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
 .tina-tailwind .font-sans {
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
@@ -929,6 +958,10 @@
   --tw-text-opacity: 1;
   color: rgb(37 35 54 / var(--tw-text-opacity));
 }
+.tina-tailwind .text-orange-600 {
+  --tw-text-opacity: 1;
+  color: rgb(220 68 25 / var(--tw-text-opacity));
+}
 .tina-tailwind .text-red-400 {
   --tw-text-opacity: 1;
   color: rgb(248 113 113 / var(--tw-text-opacity));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinacms",
-  "version": "1.5.10",
+  "version": "1.5.11",
   "main": "dist/index.js",
   "module": "./dist/index.es.js",
   "exports": {
@@ -29,6 +29,11 @@
       "import": "./dist/rich-text/index.es.js",
       "require": "./dist/rich-text/index.js"
     },
+    "./dist/dev-tools": {
+      "types": "./dist/dev-tools.d.ts",
+      "import": "./dist/dev-tools.es.js",
+      "require": "./dist/dev-tools.js"
+    },
     "./dist/rich-text/prism": {
       "types": "./dist/rich-text/prism.d.ts",
       "import": "./dist/rich-text/prism.es.js",
@@ -45,7 +50,8 @@
       "src/rich-text/index.tsx",
       "src/rich-text/prism.tsx",
       "src/react.tsx",
-      "src/client.ts"
+      "src/client.ts",
+      "src/dev-tools.tsx"
     ]
   },
   "typings": "dist/index.d.ts",
@@ -56,10 +62,10 @@
     "@headlessui/react": "^1.5.0",
     "@heroicons/react": "^1.0.4",
     "@react-hook/window-size": "^3.0.7",
-    "@tinacms/search": "1.0.2",
-    "@tinacms/schema-tools": "1.4.6",
+    "@tinacms/search": "1.0.3",
+    "@tinacms/schema-tools": "1.4.7",
     "@tinacms/sharedctx": "1.0.1",
-    "@tinacms/toolkit": "1.7.6",
+    "@tinacms/toolkit": "1.7.7",
     "crypto-js": "^4.0.0",
     "encoding": "0.1.13",
     "fetch-ponyfill": "^7.1.0",