Function ShareDialog

app/src/components/ShareDialog.tsx:37–208

({ children }: { children?: ReactNode })

import { slugify } from "../lib/helpers";

export default function ShareDialog({ children }: { children?: ReactNode }) {
  const isHosted = useDocDetails("isHosted");
  const { shareModal, setShareModal } = useContext(AppContext);
  const docString = useDoc(docToString);
  const shareLink = useMemo(() => {
    return compressToEncodedURIComponent(docString);
  }, [docString]);
  const fullscreen = `${new URL(window.location.href).origin}/f#${shareLink}`;
  const readOnly = `${new URL(window.location.href).origin}/c#${shareLink}`;
  const editable = `${new URL(window.location.href).origin}/#load:${shareLink}`;
  const filename = useDownloadFilename();
  const hasProAccess = useHasProAccess();
  const watermark = !hasProAccess;
  const scale = hasProAccess ? AUTH_IMG_SCALE : UNAUTH_IMG_SCALE;

  return (
    <Dialog.Root
      open={shareModal}
      onOpenChange={setShareModal}
      aria-label={t`Export`}
    >
      <Dialog.Trigger asChild>{children}</Dialog.Trigger>
      <Overlay />
      <Content
        maxWidthClass="max-w-[600px] w-full"
        overflowV
        data-location="Share Dialog"
      >
        <Close />
        <PreviewImage watermark={watermark} scale={scale} />
        <Column>
          <SectionTitle className="mb-1">
            <Trans>Download</Trans>
          </SectionTitle>
          <div className="grid gap-2 grid-cols-3">
            <Button2
              aria-label="Download PNG"
              data-session-activity="Download PNG"
              onClick={() => {
                if (!window.__cy) return;
                getCanvas({
                  cy: window.__cy,
                  type: "png",
                  watermark,
                  scale,
                })
                  .then((canvas) =>
                    downloadCanvas({
                      ...canvas,
                      filename,
                    })
                  )
                  .catch(console.error);
              }}
            >
              PNG
            </Button2>
            <Button2