tinacms 1.5.10 → 1.5.12

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" } });
+});