tinacms/dist/edit-state.mjs

> The Fastest Way to Edit Next.js Content

import { useEditState as useEditState$1, EditProvider, TinaDataContext } from "@tinacms/sharedctx";
import { isEditing, setEditing } from "@tinacms/sharedctx";
import React, { useState, useEffect } from "react";
const useEditState = useEditState$1;
const TinaEditProvider = ({
  showEditButton,
  ...props
}) => {
  return /* @__PURE__ */ React.createElement(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(TinaDataContext);
  const [waitForContextRerender, setWaitForContextRerender] = useState(
    !isDummyContainer
  );
  const isLoading = contextLoading || waitForContextRerender;
  React.useEffect(() => {
    setRequest({ query, variables });
  }, [JSON.stringify(variables), query]);
  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;
};
export {
  TinaEditProvider,
  isEditing,
  setEditing,
  useEditState,
  useTina
};