tinacms/dist/edit-state.js

> The Fastest Way to Edit Next.js Content

(function(global, factory) {
  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@tinacms/sharedctx"), require("react")) : typeof define === "function" && define.amd ? define(["exports", "@tinacms/sharedctx", "react"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinacms = {}, global.NOOP, global.NOOP));
})(this, function(exports2, sharedctx, React) {
  "use strict";
  const useEditState = sharedctx.useEditState;
  const TinaEditProvider = ({
    showEditButton,
    ...props
  }) => {
    return /* @__PURE__ */ React.createElement(sharedctx.EditProvider, null, showEditButton && /* @__PURE__ */ React.createElement(ToggleButton, null), /* @__PURE__ */ React.createElement(TinaEditProviderInner, { ...props }));
  };
  function useTina({
    query,
    variables,
    data
  }) {
    React.useEffect(() => {
      console.warn(`
  "useTina" from 'tinacms/dist/edit-state' is now deprecated
  * Use "import { useTina } from 'tinacms/dist/react" instead.
  * See https://tina.io/blog/upgrading-to-iframe/ for full migration details
  `);
    }, []);
    const {
      setRequest,
      state,
      isDummyContainer,
      isLoading: contextLoading
    } = React.useContext(sharedctx.TinaDataContext);
    const [waitForContextRerender, setWaitForContextRerender] = React.useState(
      !isDummyContainer
    );
    const isLoading = contextLoading || waitForContextRerender;
    React.useEffect(() => {
      setRequest({ query, variables });
    }, [JSON.stringify(variables), query]);
    React.useEffect(() => {
      if (!isDummyContainer) {
        setTimeout(() => setWaitForContextRerender(false), 0);
      }
      return () => {
        setRequest(void 0);
      };
    }, [isDummyContainer]);
    return {
      data: isDummyContainer || isLoading ? data : state.payload,
      isLoading
    };
  }
  const ToggleButton = () => {
    const { edit } = useEditState();
    const [isOnAdmin, setIsOnAdmin] = React.useState(false);
    React.useEffect(() => {
      var _a;
      if (window) {
        if ((_a = window.location) == null ? void 0 : _a.pathname.startsWith("/admin")) {
          setIsOnAdmin(true);
        }
      }
    }, [setIsOnAdmin]);
    return edit || isOnAdmin ? null : /* @__PURE__ */ React.createElement(
      "div",
      {
        style: { position: "fixed", bottom: "56px", left: "0px", zIndex: 200 }
      },
      /* @__PURE__ */ React.createElement(
        "a",
        {
          href: "/admin",
          style: {
            borderRadius: "0 50px 50px 0",
            fontSize: "16px",
            fontFamily: "Inter, 'Helvetica Neue', 'Arial Nova', Helvetica, Arial, sans-serif",
            fontWeight: "bold",
            textDecoration: "none",
            background: "rgb(34, 150, 254)",
            boxShadow: "0px 1px 3px rgb(0 0 0 / 10%), 0px 2px 6px rgb(0 0 0 / 20%)",
            color: "white",
            padding: "14px 20px",
            border: "none"
          }
        },
        "Edit with Tina"
      )
    );
  };
  const TinaEditProviderInner = ({ children, editMode }) => {
    const { edit } = useEditState();
    const [isBrowser, setIsBrowser] = React.useState(false);
    React.useEffect(() => {
      setIsBrowser(true);
    }, []);
    if (edit && isBrowser) {
      return editMode;
    }
    return children;
  };
  Object.defineProperty(exports2, "isEditing", {
    enumerable: true,
    get: () => sharedctx.isEditing
  });
  Object.defineProperty(exports2, "setEditing", {
    enumerable: true,
    get: () => sharedctx.setEditing
  });
  exports2.TinaEditProvider = TinaEditProvider;
  exports2.useEditState = useEditState;
  exports2.useTina = useTina;
  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
});