@datawheel/bespoke 0.6.0-rc.7 → 0.6.0-rc.9

package/dist/index.js

@@ -22,10 +22,11 @@ import { Notifications, notifications } from '@mantine/notifications';
 import { useDispatch, useSelector } from 'react-redux';
 import Router, { useRouter } from 'next/router';
 import { useClickOutside, useDisclosure, useDebouncedValue, useSetState, useUncontrolled, useHotkeys, useListState, randomId, getHotkeyHandler, useMediaQuery, useMergedRef, useFullscreen } from '@mantine/hooks';
-import { IconDice, IconBoxMultiple, IconEyeOff, IconChevronDown, IconBallpen, IconDatabase, IconMathFunction, IconUsers, IconLogout, IconHeading, IconApi, IconPercentage, IconChartBar, IconAlignLeft, IconSelector, IconPhoto, IconTable, IconUserCircle, IconEdit, IconServer, IconPencil, IconAlertCircle, IconCircleCheck, IconPlayerPlay, IconTrash, IconCircleX, IconPlus, IconFileAnalytics, IconHome, IconSearch, IconX, IconRefresh, IconDownload, IconCircleDashed, IconLanguage, IconSettingsFilled, IconEye, IconWorldUpload, IconBraces, IconClockHour2, IconAugmentedReality, IconGitMerge, IconGripHorizontal, IconChevronLeft, IconChevronRight, IconListCheck, IconPolaroid, IconCircleMinus, IconInfoCircle, IconGripVertical, IconCamera, IconShare, IconQuestionMark, IconCirclePlus, IconLogin, IconWorld, IconLock, IconCopy, IconBinaryTree, IconVariable, IconArrowRightCircle, IconPhotoFilled, IconFileUpload, IconIndentIncrease, IconCodeDots, IconUpload, IconCheck, IconCodePlus, IconLink, IconSparkles, IconClipboardCheck, IconClipboardCopy, IconExternalLink, IconFileTypeCsv, IconFileTypeJs, IconFileTypeXls, IconTemplate, IconCode, IconPalette, IconBold, IconItalic, IconUnderline, IconAlignCenter, IconAlignRight, IconAlignJustified, IconArrowBackUp, IconArrowForwardUp, IconLanguageOff, IconTriangleInvertedFilled, IconDeviceFloppy, IconSettings, IconMinimize, IconMaximize, IconGlobe, IconLinkOff } from '@tabler/icons-react';
+import { IconDice, IconBoxMultiple, IconEyeOff, IconChevronDown, IconBallpen, IconDatabase, IconMathFunction, IconUsers, IconLogout, IconHeading, IconApi, IconPercentage, IconChartBar, IconAlignLeft, IconSelector, IconPhoto, IconTable, IconUserCircle, IconEdit, IconServer, IconPencil, IconAlertCircle, IconCircleCheck, IconPlayerPlay, IconTrash, IconCircleX, IconPlus, IconFileAnalytics, IconHome, IconSearch, IconX, IconRefresh, IconDownload, IconCircleDashed, IconLanguage, IconSettingsFilled, IconEye, IconWorldUpload, IconBraces, IconClockHour2, IconAugmentedReality, IconGitMerge, IconGripHorizontal, IconChevronLeft, IconChevronRight, IconListCheck, IconPolaroid, IconCircleMinus, IconInfoCircle, IconGripVertical, IconCamera, IconShare, IconQuestionMark, IconCirclePlus, IconLogin, IconWorld, IconLock, IconCopy, IconBinaryTree, IconVariable, IconArrowRightCircle, IconPhotoFilled, IconFileUpload, IconIndentIncrease, IconCodeDots, IconUpload, IconCheck, IconCodePlus, IconLink, IconSparkles, IconClipboardCheck, IconClipboardCopy, IconExternalLink, IconFileTypeCsv, IconFileTypeJs, IconFileTypeXls, IconTemplate, IconPalette, IconBold, IconItalic, IconUnderline, IconAlignCenter, IconAlignRight, IconAlignJustified, IconArrowBackUp, IconArrowForwardUp, IconLanguageOff, IconTriangleInvertedFilled, IconCode, IconDeviceFloppy, IconSettings, IconMinimize, IconMaximize, IconGlobe, IconLinkOff } from '@tabler/icons-react';
 import Link from 'next/link';
 import parse2, { Element as Element$1, domToReact, Text as Text$1 } from 'html-react-parser';
 import { UserProvider, withPageAuthRequired, useUser } from '@auth0/nextjs-auth0/client';
+import { initFrameAndPoll, Framer } from '@newswire/frames';
 import { MantineReactTable } from 'mantine-react-table';
 import { dataConcat, dataLoad } from 'd3plus-viz';
 import * as d3plus from 'd3plus-react';
@@ -50,8 +51,9 @@ import { Prism } from '@mantine/prism';
 import slugifyFn from 'slugify';
 import JSZip from 'jszip';
 import { saveAs } from 'file-saver';
-import { select } from 'd3-selection';
 import { FacebookShareButton, FacebookIcon, TwitterShareButton, TwitterIcon, TelegramShareButton, TelegramIcon, WhatsappShareButton, WhatsappIcon, LinkedinShareButton, LinkedinIcon, RedditShareButton, RedditIcon, EmailShareButton, EmailIcon } from 'react-share';
+import { select } from 'd3-selection';
+import { toPng } from 'html-to-image';
 import Head from 'next/head';
 import Editor, { useMonaco } from '@monaco-editor/react';
 import { format } from 'pretty-format';
@@ -263,8 +265,8 @@ var init_ExploreFilters = __esm({
 });
 
 // api/http/lib.ts
-function http(axios11, config) {
-  return axios11.request(config).then((response) => {
+function http(axios10, config) {
+  return axios10.request(config).then((response) => {
     const { status, data } = response;
     return "error" in data ? { ok: false, status, error: data.error } : { ok: true, status, data: data.data };
   }, (err) => {
@@ -275,26 +277,26 @@ function http(axios11, config) {
     return { ok: false, status: 500, error: err.message };
   });
 }
-function httpGET(axios11, request, transformParams) {
+function httpGET(axios10, request, transformParams) {
   const config = typeof request === "string" ? { url: request } : request;
-  return (params) => http(axios11, {
+  return (params) => http(axios10, {
     ...config,
     method: "GET",
     params: transformParams ? transformParams(params) : params
   });
 }
-function httpPOST(axios11, request, transformPayload) {
+function httpPOST(axios10, request, transformPayload) {
   const config = typeof request === "string" ? { url: request } : request;
-  return (payload) => http(axios11, {
+  return (payload) => http(axios10, {
     ...config,
     method: "POST",
     data: transformPayload ? transformPayload(payload) : payload
   });
 }
-function httpDELETE(axios11, request, transformPayload) {
+function httpDELETE(axios10, request, transformPayload) {
   const config = typeof request === "string" ? { url: request } : request;
   return (payload) => {
-    return http(axios11, {
+    return http(axios10, {
       ...config,
       method: "DELETE",
       params: transformPayload ? transformPayload(payload) : payload
@@ -308,8 +310,8 @@ var init_lib = __esm({
 });
 
 // api/http/image/imageSave.ts
-function httpImageSaveFactory(axios11, provider) {
-  return (params) => http(axios11, {
+function httpImageSaveFactory(axios10, provider) {
+  return (params) => http(axios10, {
     method: "POST",
     url: `images/save/${provider}`,
     params: { prompt: params.prompt, provider }
@@ -323,8 +325,8 @@ var init_imageSave = __esm({
 });
 
 // api/http/image/imageSearch.ts
-function httpImageSearchFactory(axios11, provider) {
-  return (params) => http(axios11, {
+function httpImageSearchFactory(axios10, provider) {
+  return (params) => http(axios10, {
     method: "GET",
     url: `images/search/${provider}`,
     params: { prompt: params.prompt, page: params.page, provider }
@@ -338,8 +340,8 @@ var init_imageSearch = __esm({
 });
 
 // api/http/icon/listIcons.ts
-function httpListIconsFactory(axios11, provider) {
-  return () => http(axios11, {
+function httpListIconsFactory(axios10, provider) {
+  return () => http(axios10, {
     method: "GET",
     url: `list/icons/${provider}`,
     params: { provider }
@@ -353,8 +355,8 @@ var init_listIcons = __esm({
 });
 
 // api/http/icon/readIcon.ts
-function httpReadIconFactory(axios11, provider) {
-  return (params) => http(axios11, {
+function httpReadIconFactory(axios10, provider) {
+  return (params) => http(axios10, {
     method: "GET",
     url: `read/icons/${provider}/icon.svg`,
     params: { name: params.name }
@@ -367,65 +369,65 @@ var init_readIcon = __esm({
   }
 });
 function apiFactory(baseURL) {
-  const axios11 = axios.create({ baseURL });
+  const axios10 = axios.create({ baseURL });
   return {
-    createBulkBlock: httpPOST(axios11, "create/bulk/block"),
-    createBlock: httpPOST(axios11, "create/block"),
-    createDimension: httpPOST(axios11, "create/dimension"),
-    createFormatter: httpPOST(axios11, "create/formatter"),
-    createReport: httpPOST(axios11, "create/report"),
-    createSection: httpPOST(axios11, "create/section"),
-    createVariant: httpPOST(axios11, "create/variant"),
-    deleteBlock: httpDELETE(axios11, "delete/block", transformDeletePayload),
-    deleteDimension: httpDELETE(axios11, "delete/dimension", transformDeletePayload),
-    deleteFormatter: httpDELETE(axios11, "delete/formatter", transformDeletePayload),
-    deleteReport: httpDELETE(axios11, "delete/report", transformDeletePayload),
-    deleteSection: httpDELETE(axios11, "delete/section", transformDeletePayload),
-    deleteVariant: httpDELETE(axios11, "delete/variant", transformDeletePayload),
-    readBlock: httpGET(axios11, "read/block"),
-    readDimension: httpGET(axios11, "read/dimension"),
-    readFormatter: httpGET(axios11, "read/formatter"),
-    readReport: httpGET(axios11, "read/report"),
-    readSection: httpGET(axios11, "read/section"),
-    readVariant: httpGET(axios11, "read/variant"),
-    updateBulkBlock: httpPOST(axios11, "update/bulk/block"),
-    updateBlock: httpPOST(axios11, "update/block"),
-    updateDimension: httpPOST(axios11, "update/dimension"),
-    updateFormatter: httpPOST(axios11, "update/formatter"),
-    updateReport: httpPOST(axios11, "update/report"),
-    updateSection: httpPOST(axios11, "update/section"),
-    updateVariant: httpPOST(axios11, "update/variant"),
-    searchReport: httpGET(axios11, "search/reports"),
-    validateVariantSlug: httpGET(axios11, "validate/variant"),
-    readMember: httpGET(axios11, "read/members", transformReadMembers),
-    readMemberImage: httpGET(axios11, {
+    createBulkBlock: httpPOST(axios10, "create/bulk/block"),
+    createBlock: httpPOST(axios10, "create/block"),
+    createDimension: httpPOST(axios10, "create/dimension"),
+    createFormatter: httpPOST(axios10, "create/formatter"),
+    createReport: httpPOST(axios10, "create/report"),
+    createSection: httpPOST(axios10, "create/section"),
+    createVariant: httpPOST(axios10, "create/variant"),
+    deleteBlock: httpDELETE(axios10, "delete/block", transformDeletePayload),
+    deleteDimension: httpDELETE(axios10, "delete/dimension", transformDeletePayload),
+    deleteFormatter: httpDELETE(axios10, "delete/formatter", transformDeletePayload),
+    deleteReport: httpDELETE(axios10, "delete/report", transformDeletePayload),
+    deleteSection: httpDELETE(axios10, "delete/section", transformDeletePayload),
+    deleteVariant: httpDELETE(axios10, "delete/variant", transformDeletePayload),
+    readBlock: httpGET(axios10, "read/block"),
+    readDimension: httpGET(axios10, "read/dimension"),
+    readFormatter: httpGET(axios10, "read/formatter"),
+    readReport: httpGET(axios10, "read/report"),
+    readSection: httpGET(axios10, "read/section"),
+    readVariant: httpGET(axios10, "read/variant"),
+    updateBulkBlock: httpPOST(axios10, "update/bulk/block"),
+    updateBlock: httpPOST(axios10, "update/block"),
+    updateDimension: httpPOST(axios10, "update/dimension"),
+    updateFormatter: httpPOST(axios10, "update/formatter"),
+    updateReport: httpPOST(axios10, "update/report"),
+    updateSection: httpPOST(axios10, "update/section"),
+    updateVariant: httpPOST(axios10, "update/variant"),
+    searchReport: httpGET(axios10, "search/reports"),
+    validateVariantSlug: httpGET(axios10, "validate/variant"),
+    readMember: httpGET(axios10, "read/members", transformReadMembers),
+    readMemberImage: httpGET(axios10, {
       url: "member/image",
       responseType: "blob"
     }),
-    searchMember: httpGET(axios11, "search/members"),
-    updateMember: httpGET(axios11, "update/members"),
-    imageLocalSearch: httpImageSearchFactory(axios11, "local"),
-    imageLocalSave: httpImageSaveFactory(axios11, "local"),
-    imageFlickrSearch: httpImageSearchFactory(axios11, "flickr"),
-    imageFlickrSave: httpImageSaveFactory(axios11, "flickr"),
-    imageUnsplashSearch: httpImageSearchFactory(axios11, "unsplash"),
-    imageUnsplashSave: httpImageSaveFactory(axios11, "unsplash"),
-    imageUploadSave: httpImageSaveFactory(axios11, "upload"),
-    imageAdobeSearch: httpImageSearchFactory(axios11, "adobe"),
-    imageAdobeSave: httpImageSaveFactory(axios11, "adobe"),
-    readMetadata: httpGET(axios11, "read/metadata"),
-    regenerateSearch: httpPOST(axios11, "search/regenerate"),
-    urlProxy: httpGET(axios11, "url/proxy"),
-    searchRole: httpGET(axios11, "auth/search/roles"),
-    searchUser: httpGET(axios11, "auth/search/users"),
-    readUser: httpGET(axios11, "auth/read/user"),
-    updateUser: httpPOST(axios11, "auth/update/user"),
-    updateMyData: httpPOST(axios11, "auth/update/me"),
-    revalidateReport: httpGET(axios11, "revalidate/report"),
-    revalidateUrl: httpGET(axios11, "revalidate/url"),
-    readPrivateBlocks: httpPOST(axios11, "read/blocks/private"),
-    listTablerIcons: httpListIconsFactory(axios11, "tabler"),
-    readTablerIcon: httpReadIconFactory(axios11, "tabler")
+    searchMember: httpGET(axios10, "search/members"),
+    updateMember: httpGET(axios10, "update/members"),
+    imageLocalSearch: httpImageSearchFactory(axios10, "local"),
+    imageLocalSave: httpImageSaveFactory(axios10, "local"),
+    imageFlickrSearch: httpImageSearchFactory(axios10, "flickr"),
+    imageFlickrSave: httpImageSaveFactory(axios10, "flickr"),
+    imageUnsplashSearch: httpImageSearchFactory(axios10, "unsplash"),
+    imageUnsplashSave: httpImageSaveFactory(axios10, "unsplash"),
+    imageUploadSave: httpImageSaveFactory(axios10, "upload"),
+    imageAdobeSearch: httpImageSearchFactory(axios10, "adobe"),
+    imageAdobeSave: httpImageSaveFactory(axios10, "adobe"),
+    readMetadata: httpGET(axios10, "read/metadata"),
+    regenerateSearch: httpPOST(axios10, "search/regenerate"),
+    urlProxy: httpGET(axios10, "url/proxy"),
+    searchRole: httpGET(axios10, "auth/search/roles"),
+    searchUser: httpGET(axios10, "auth/search/users"),
+    readUser: httpGET(axios10, "auth/read/user"),
+    updateUser: httpPOST(axios10, "auth/update/user"),
+    updateMyData: httpPOST(axios10, "auth/update/me"),
+    revalidateReport: httpGET(axios10, "revalidate/report"),
+    revalidateUrl: httpGET(axios10, "revalidate/url"),
+    readPrivateBlocks: httpPOST(axios10, "read/blocks/private"),
+    listTablerIcons: httpListIconsFactory(axios10, "tabler"),
+    readTablerIcon: httpReadIconFactory(axios10, "tabler")
   };
 }
 var transformDeletePayload, transformReadMembers;
@@ -4093,7 +4095,7 @@ var init_store = __esm({
     storeWrapper = createWrapper(storeFactory);
   }
 });
-function withFetcher(Component, useRef14) {
+function withFetcher(Component, useRef16) {
   const ComponentWithFetcher = (props) => {
     const {
       id,
@@ -4101,7 +4103,7 @@ function withFetcher(Component, useRef14) {
       skelWidth,
       ...otherProps
     } = props;
-    const ref = useRef14(id);
+    const ref = useRef16(id);
     if (ref.isUninitialized || ref.isFetching) {
       return /* @__PURE__ */ jsx(Skeleton, { width: skelWidth, height: skelHeight });
     }
@@ -5725,6 +5727,41 @@ var init_useScrollToAnchor = __esm({
     init_esm_shims();
   }
 });
+function useEmbed() {
+  const loaded = useRef(false);
+  useEffect(() => {
+    let prevRequests = 0;
+    let thresholdCount = 0;
+    const interval = setInterval(() => {
+      const resources = performance.getEntriesByType("resource");
+      const allRequestsComplete = resources.every((resource) => resource.responseEnd > 0);
+      if (prevRequests === resources.length && allRequestsComplete && thresholdCount > 3) {
+        clearInterval(interval);
+        if (!loaded.current) {
+          setTimeout(() => {
+            window.parent.postMessage("iframe-loaded", "*");
+          }, 500);
+          loaded.current = true;
+        }
+      } else {
+        if (resources.length > prevRequests) {
+          thresholdCount = 0;
+        } else {
+          thresholdCount++;
+        }
+        prevRequests = resources.length;
+      }
+    }, 300);
+    if (typeof document !== "undefined") {
+      initFrameAndPoll();
+    }
+  }, []);
+}
+var init_useEmbed = __esm({
+  "frontend/hooks/useEmbed.ts"() {
+    init_esm_shims();
+  }
+});
 function createOutline(elements, variables) {
   const roots = [];
   const nodes = {};
@@ -5842,6 +5879,7 @@ var init_hooks2 = __esm({
     init_useInitialState();
     init_useOnChangeSelector();
     init_useScrollToAnchor();
+    init_useEmbed();
     init_useContentOutline();
   }
 });
@@ -15951,12 +15989,169 @@ var init_useLocalePrefix = __esm({
     init_esm_shims();
   }
 });
+function CopyInput(props) {
+  const { title, url, disabled = false } = props;
+  const Icon = disabled ? IconCode : IconLink;
+  return /* @__PURE__ */ jsx(Input.Wrapper, { label: title, children: /* @__PURE__ */ jsx(
+    Input,
+    {
+      icon: /* @__PURE__ */ jsx(Icon, {}),
+      value: url,
+      disabled,
+      readOnly: true,
+      rightSection: /* @__PURE__ */ jsx(CopyButton, { value: url, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsx(Tooltip, { label: copied ? "Copied" : "Copy", withArrow: true, position: "right", children: /* @__PURE__ */ jsx(ActionIcon, { variant: copied ? "filled" : "subtle", onClick: copy, disabled, children: copied ? /* @__PURE__ */ jsx(IconClipboardCheck, { size: 16 }) : /* @__PURE__ */ jsx(IconClipboardCopy, { size: 16 }) }) }) })
+    }
+  ) });
+}
+var init_CopyInput = __esm({
+  "components/options/CopyInput.tsx"() {
+    init_esm_shims();
+  }
+});
+function useEmbedPath(sectionId, vizId = void 0, queryParams = {}) {
+  const { query, locale } = useRouter();
+  const prefixLocale = useLocalePrefix();
+  const { pathSegment } = useBespoke();
+  const slugs = query[pathSegment];
+  if (slugs && Array.isArray(slugs)) {
+    const search = new URLSearchParams({ section: sectionId, ...queryParams });
+    if (vizId) {
+      search.set("viz", vizId);
+    }
+    const embed = `/embed/${slugs.join("/")}`;
+    const url = new URL(
+      prefixLocale ? `/${locale}${embed}` : `${embed}`,
+      location.href
+    );
+    url.search = search.toString();
+    return url.href;
+  }
+  return void 0;
+}
+function ShareTab(props) {
+  const { section } = props;
+  const [shareUrl, setShareUrl] = useState("");
+  const [title, setTitle] = useState("");
+  const [includeSection, setIncludeSection] = useState(true);
+  const optionsTranslations = useBespokeTranslations("options");
+  const embedPath = useEmbedPath(section.id);
+  const iframeStr = `<iframe width="100%" height="500px" frameborder="0" src="${embedPath}"></iframe>`;
+  const translations = { ...DEFAULT_TRANSLATIONS3, ...optionsTranslations["share_tab"] };
+  useEffect(() => {
+    setTitle(document.title);
+    const { origin, pathname } = window.location;
+    const url = `${origin}${pathname}`;
+    const sectionAnchor = includeSection ? `#section-${section.id}` : "";
+    setShareUrl(`${url}${sectionAnchor}`);
+  }, [includeSection]);
+  return /* @__PURE__ */ jsxs(Stack, { className: "cms-section-options-share", children: [
+    /* @__PURE__ */ jsx(Space, { h: "xs" }),
+    /* @__PURE__ */ jsx(CopyInput, { title: `${translations["title"]}: ${title}`, url: shareUrl }),
+    /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        checked: includeSection,
+        label: translations["include_section"],
+        onChange: () => setIncludeSection(!includeSection),
+        radius: "xl"
+      }
+    ),
+    /* @__PURE__ */ jsx(CopyInput, { title: translations["embed"], url: iframeStr }),
+    /* @__PURE__ */ jsxs(Group, { position: "center", children: [
+      /* @__PURE__ */ jsx(
+        FacebookShareButton,
+        {
+          url: shareUrl,
+          quote: title,
+          children: /* @__PURE__ */ jsx(FacebookIcon, { size: 32, round: true })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TwitterShareButton,
+        {
+          url: shareUrl,
+          title,
+          children: /* @__PURE__ */ jsx(TwitterIcon, { size: 32, round: true })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TelegramShareButton,
+        {
+          url: shareUrl,
+          title,
+          children: /* @__PURE__ */ jsx(TelegramIcon, { size: 32, round: true })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        WhatsappShareButton,
+        {
+          url: shareUrl,
+          title,
+          separator: ":: ",
+          children: /* @__PURE__ */ jsx(WhatsappIcon, { size: 32, round: true })
+        }
+      ),
+      /* @__PURE__ */ jsx(LinkedinShareButton, { url: shareUrl, children: /* @__PURE__ */ jsx(LinkedinIcon, { size: 32, round: true }) }),
+      /* @__PURE__ */ jsx(
+        RedditShareButton,
+        {
+          url: shareUrl,
+          title,
+          windowWidth: 660,
+          windowHeight: 460,
+          children: /* @__PURE__ */ jsx(RedditIcon, { size: 32, round: true })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        EmailShareButton,
+        {
+          url: shareUrl,
+          subject: title,
+          children: /* @__PURE__ */ jsx(EmailIcon, { size: 32, round: true })
+        }
+      )
+    ] })
+  ] });
+}
+var DEFAULT_TRANSLATIONS3;
+var init_ShareTab = __esm({
+  "components/options/tabs/ShareTab.tsx"() {
+    init_esm_shims();
+    init_CopyInput();
+    init_TranslationsProvider();
+    init_useLocalePrefix();
+    init_ResourceProvider();
+    DEFAULT_TRANSLATIONS3 = {
+      "title": "Title",
+      "include_section": "Include Section",
+      "embed": "Embed"
+    };
+  }
+});
+function exportSVG(svg) {
+  const serializer = new XMLSerializer();
+  let source = serializer.serializeToString(svg);
+  if (!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)) {
+    source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
+  }
+  if (!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)) {
+    source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
+  }
+  source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
+  const url = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);
+  const a2 = document.createElement("a");
+  const e = new MouseEvent("click");
+  a2.download = "image.svg";
+  a2.href = url;
+  a2.dispatchEvent(e);
+}
 function ImageTab(props) {
   const { section } = props;
   const blocksIds = section.blocks || [];
-  const { asPath, query, locale } = useRouter();
-  const prefixLocale = useLocalePrefix();
-  const { pathSegment } = useBespoke();
+  const framer = useRef();
+  useRouter();
+  useLocalePrefix();
+  useBespoke();
   const vizAvailable = useAppSelector((state) => blocksIds.map((blockId) => state.records.entities.block[blockId]).filter((block) => block.type === "visualization" && state.variables.status[block.id].allowed));
   const [imageContext, setImageContext] = useState(contextOptions.section);
   const [imageFormat, setImageFormat] = useState(formatOptions2.png);
@@ -15966,62 +16161,13 @@ function ImageTab(props) {
   const [transparentBackground, setTransparentBackground] = useState(false);
   const [loadingPreviews, setLoadingPreviews] = useState(false);
   const optionsTranslations = useBespokeTranslations("options");
-  const translations = { ...DEFAULT_TRANSLATIONS3, ...optionsTranslations["image_tab"] };
+  const translations = { ...DEFAULT_TRANSLATIONS4, ...optionsTranslations["image_tab"] };
+  const search = Object.fromEntries(new URLSearchParams(location.search));
+  const selectors = Object.fromEntries(
+    Object.entries(search).filter(([key]) => key.match(/selector\d+id/))
+  );
   const sectionId = slugify_default(section?.settings?.name) || `section-${section.id}`;
-  const onSaveClickSection = async () => {
-    const search = Object.fromEntries(new URLSearchParams(location.search));
-    const selectors = Object.fromEntries(
-      Object.entries(search).filter(([key]) => key.match(/selector\d+id/))
-    );
-    const body = {
-      path: asPath,
-      slugs: JSON.stringify(query[pathSegment]),
-      section: section.id,
-      query: selectors,
-      locale,
-      prefixLocale,
-      transparent: transparentBackground
-    };
-    setImageProcessing(true);
-    axios.post("/api/cms/img", body, { responseType: "blob" }).then((res) => {
-      const url = window.URL.createObjectURL(new Blob([res.data]));
-      const link = document.createElement("a");
-      link.href = url;
-      link.setAttribute("download", "image.png");
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      setImageProcessing(false);
-    });
-  };
-  const onSaveClickViz = async () => {
-    const search = Object.fromEntries(new URLSearchParams(location.search));
-    const selectors = Object.fromEntries(
-      Object.entries(search).filter(([key]) => key.match(/selector\d+id/))
-    );
-    const body = {
-      path: asPath,
-      slugs: JSON.stringify(query[pathSegment]),
-      section: section.id,
-      viz: vizSelected,
-      query: selectors,
-      locale,
-      prefixLocale,
-      transparent: transparentBackground,
-      svg: imageFormat === formatOptions2.svg
-    };
-    setImageProcessing(true);
-    axios.post("/api/cms/img", body, { responseType: "blob" }).then((res) => {
-      const url = window.URL.createObjectURL(new Blob([res.data]));
-      const link = document.createElement("a");
-      link.href = url;
-      link.setAttribute("download", `image.${imageFormat.toLowerCase()}`);
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      setImageProcessing(false);
-    });
-  };
+  const embedPath = useEmbedPath(section.id, imageContext === contextOptions.viz ? vizSelected : void 0, selectors);
   const generatePreviews = async () => {
     const { toCanvas } = await import('html-to-image');
     Promise.all(
@@ -16047,6 +16193,51 @@ function ImageTab(props) {
   const onSelectViz = (vizId) => () => {
     setVizSelected(vizId);
   };
+  const onDownloadIframe = () => {
+    setImageProcessing(true);
+    const container = document.getElementById("iframe-preview");
+    framer.current = new Framer(container, { src: embedPath });
+  };
+  useEffect(() => {
+    const onIframeLoad = (e) => {
+      if (e.data === "iframe-loaded") {
+        console.log("Downloading image");
+        const node = document.getElementById("iframe-preview");
+        if (imageFormat === formatOptions2.png) {
+          toPng(
+            node,
+            {
+              backgroundColor: transparentBackground ? "transparent" : "white",
+              cacheBust: true
+            }
+          ).then(function(dataUrl) {
+            const link = document.createElement("a");
+            link.href = dataUrl;
+            link.setAttribute("download", "image.png");
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            setImageProcessing(false);
+            if (typeof framer.current?.remove === "function") {
+              framer.current.remove();
+            }
+          }).catch(function(error) {
+            console.error("oops, something went wrong!", error);
+            setImageProcessing(false);
+          });
+        } else {
+          const iframe = document.querySelector("#iframe-preview > iframe");
+          const doc = iframe.contentDocument;
+          const svg = doc?.querySelector("svg.d3plus-viz");
+          console.log(svg.innerHtml);
+          if (svg)
+            exportSVG(svg);
+        }
+      }
+    };
+    window.addEventListener("message", onIframeLoad);
+    return () => window.removeEventListener("message", onIframeLoad);
+  }, [transparentBackground]);
   return /* @__PURE__ */ jsxs(Stack, { className: "cms-section-options-image", children: [
     /* @__PURE__ */ jsx(Space, { h: "xs" }),
     vizAvailable.length > 0 ? /* @__PURE__ */ jsx(Input.Wrapper, { label: `${translations["choose_area"]}:`, children: /* @__PURE__ */ jsx(
@@ -16093,28 +16284,7 @@ function ImageTab(props) {
         ]
       }
     ),
-    imageContext !== contextOptions.section && /* @__PURE__ */ jsx(Input.Wrapper, { label: `${translations["choose_format"]}:`, children: /* @__PURE__ */ jsxs(Button.Group, { children: [
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          leftIcon: /* @__PURE__ */ jsx(IconPolaroid, { size: 16 }),
-          onClick: () => setImageFormat(formatOptions2.png),
-          variant: imageFormat === formatOptions2.png ? "filled" : "default",
-          fullWidth: true,
-          children: formatOptions2.png
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          leftIcon: /* @__PURE__ */ jsx(IconCode, { size: 16 }),
-          onClick: () => setImageFormat(formatOptions2.svg),
-          variant: imageFormat === formatOptions2.svg ? "filled" : "default",
-          fullWidth: true,
-          children: formatOptions2.svg
-        }
-      )
-    ] }) }),
+    /* @__PURE__ */ jsx("div", { style: { height: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx("div", { id: "iframe-preview", "data-frame-src": embedPath, style: { width: 1e3 } }) }),
     imageFormat !== formatOptions2.svg && /* @__PURE__ */ jsx(
       Checkbox,
       {
@@ -16129,14 +16299,14 @@ function ImageTab(props) {
       {
         leftIcon: /* @__PURE__ */ jsx(IconDownload, { size: 16 }),
         loading: imageProcessing,
-        onClick: imageContext === contextOptions.section ? onSaveClickSection : onSaveClickViz,
+        onClick: onDownloadIframe,
         fullWidth: true,
         children: /* @__PURE__ */ jsx("span", { children: imageProcessing ? translations["processing"] : translations["download"].replace("{imageFormat}", imageFormat) })
       }
     )
   ] });
 }
-var contextOptions, formatOptions2, VizPreview2, DEFAULT_TRANSLATIONS3, getSectionNode, getVizNode;
+var contextOptions, formatOptions2, VizPreview2, DEFAULT_TRANSLATIONS4, getSectionNode, getVizNode;
 var init_ImageTab = __esm({
   "components/options/tabs/ImageTab.tsx"() {
     init_esm_shims();
@@ -16149,6 +16319,7 @@ var init_ImageTab = __esm({
     init_varSwapRecursive();
     init_getBlockContent();
     init_hooks();
+    init_ShareTab();
     contextOptions = {
       viz: "viz",
       section: "section"
@@ -16202,7 +16373,7 @@ var init_ImageTab = __esm({
         )
       ] });
     };
-    DEFAULT_TRANSLATIONS3 = {
+    DEFAULT_TRANSLATIONS4 = {
       "wrong_node": "Wrong node in export",
       "choose_area": "Choose image area",
       "choose_viz": "Choose visualization",
@@ -16225,142 +16396,6 @@ var init_ImageTab = __esm({
     };
   }
 });
-function CopyInput(props) {
-  const { title, url, disabled = false } = props;
-  const Icon = disabled ? IconCode : IconLink;
-  return /* @__PURE__ */ jsx(Input.Wrapper, { label: title, children: /* @__PURE__ */ jsx(
-    Input,
-    {
-      icon: /* @__PURE__ */ jsx(Icon, {}),
-      value: url,
-      disabled,
-      readOnly: true,
-      rightSection: /* @__PURE__ */ jsx(CopyButton, { value: url, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsx(Tooltip, { label: copied ? "Copied" : "Copy", withArrow: true, position: "right", children: /* @__PURE__ */ jsx(ActionIcon, { variant: copied ? "filled" : "subtle", onClick: copy, disabled, children: copied ? /* @__PURE__ */ jsx(IconClipboardCheck, { size: 16 }) : /* @__PURE__ */ jsx(IconClipboardCopy, { size: 16 }) }) }) })
-    }
-  ) });
-}
-var init_CopyInput = __esm({
-  "components/options/CopyInput.tsx"() {
-    init_esm_shims();
-  }
-});
-function useEmbedPath(sectionId) {
-  const { query, locale } = useRouter();
-  const prefixLocale = useLocalePrefix();
-  const { pathSegment } = useBespoke();
-  const slugs = query[pathSegment];
-  if (slugs && Array.isArray(slugs)) {
-    const search = new URLSearchParams({ section: sectionId });
-    const embed = `/embed/${slugs.join("/")}`;
-    const url = new URL(
-      prefixLocale ? `/${locale}${embed}` : `${embed}`,
-      location.href
-    );
-    url.search = search.toString();
-    return url.href;
-  }
-  return void 0;
-}
-function ShareTab(props) {
-  const { section } = props;
-  const [shareUrl, setShareUrl] = useState("");
-  const [title, setTitle] = useState("");
-  const [includeSection, setIncludeSection] = useState(true);
-  const optionsTranslations = useBespokeTranslations("options");
-  const embedPath = useEmbedPath(section.id);
-  const iframeStr = `<iframe width="100%" height="500px" frameborder="0" src="${embedPath}"></iframe>`;
-  const translations = { ...DEFAULT_TRANSLATIONS4, ...optionsTranslations["share_tab"] };
-  useEffect(() => {
-    setTitle(document.title);
-    const { origin, pathname } = window.location;
-    const url = `${origin}${pathname}`;
-    const sectionAnchor = includeSection ? `#section-${section.id}` : "";
-    setShareUrl(`${url}${sectionAnchor}`);
-  }, [includeSection]);
-  return /* @__PURE__ */ jsxs(Stack, { className: "cms-section-options-share", children: [
-    /* @__PURE__ */ jsx(Space, { h: "xs" }),
-    /* @__PURE__ */ jsx(CopyInput, { title: `${translations["title"]}: ${title}`, url: shareUrl }),
-    /* @__PURE__ */ jsx(
-      Checkbox,
-      {
-        checked: includeSection,
-        label: translations["include_section"],
-        onChange: () => setIncludeSection(!includeSection),
-        radius: "xl"
-      }
-    ),
-    /* @__PURE__ */ jsx(CopyInput, { title: translations["embed"], url: iframeStr }),
-    /* @__PURE__ */ jsxs(Group, { position: "center", children: [
-      /* @__PURE__ */ jsx(
-        FacebookShareButton,
-        {
-          url: shareUrl,
-          quote: title,
-          children: /* @__PURE__ */ jsx(FacebookIcon, { size: 32, round: true })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        TwitterShareButton,
-        {
-          url: shareUrl,
-          title,
-          children: /* @__PURE__ */ jsx(TwitterIcon, { size: 32, round: true })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        TelegramShareButton,
-        {
-          url: shareUrl,
-          title,
-          children: /* @__PURE__ */ jsx(TelegramIcon, { size: 32, round: true })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        WhatsappShareButton,
-        {
-          url: shareUrl,
-          title,
-          separator: ":: ",
-          children: /* @__PURE__ */ jsx(WhatsappIcon, { size: 32, round: true })
-        }
-      ),
-      /* @__PURE__ */ jsx(LinkedinShareButton, { url: shareUrl, children: /* @__PURE__ */ jsx(LinkedinIcon, { size: 32, round: true }) }),
-      /* @__PURE__ */ jsx(
-        RedditShareButton,
-        {
-          url: shareUrl,
-          title,
-          windowWidth: 660,
-          windowHeight: 460,
-          children: /* @__PURE__ */ jsx(RedditIcon, { size: 32, round: true })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        EmailShareButton,
-        {
-          url: shareUrl,
-          subject: title,
-          children: /* @__PURE__ */ jsx(EmailIcon, { size: 32, round: true })
-        }
-      )
-    ] })
-  ] });
-}
-var DEFAULT_TRANSLATIONS4;
-var init_ShareTab = __esm({
-  "components/options/tabs/ShareTab.tsx"() {
-    init_esm_shims();
-    init_CopyInput();
-    init_TranslationsProvider();
-    init_useLocalePrefix();
-    init_ResourceProvider();
-    DEFAULT_TRANSLATIONS4 = {
-      "title": "Title",
-      "include_section": "Include Section",
-      "embed": "Embed"
-    };
-  }
-});
 function OptionsModal(props) {
   const {
     section,
@@ -17694,6 +17729,9 @@ var LoginButton_default = BespokeLoginBtn;
 init_esm_shims();
 var UserProvider_default = UserProvider;
 
+// frontend/index.ts
+init_hooks2();
+
 // frontend/components/auth/withPageRoleAuthRequired.tsx
 init_esm_shims();
 function withPageRoleAuthRequired(params) {
@@ -25818,4 +25856,4 @@ function BespokeRenderer({
   ] }) });
 }
 
-export { Explore_default as BespokeExplore, ExploreModal_default as BespokeExploreModal, LoginButton_default as BespokeLoginBtn, BespokeManager, BespokeRenderer, Report_default as BespokeReport, Search_default as BespokeSearch, UserProvider_default as BespokeUserProvider, withPageRoleAuthRequired as BespokeWithPageRoleAuthRequired, CMS_ROLES, DialogProvider, actions_exports as actions, storeWrapper, useAppDispatch as useBespokeDispatch, useAppSelector as useBespokeSelector, useUser_default as useBespokeUser, useDialog };
+export { Explore_default as BespokeExplore, ExploreModal_default as BespokeExploreModal, LoginButton_default as BespokeLoginBtn, BespokeManager, BespokeRenderer, Report_default as BespokeReport, Search_default as BespokeSearch, UserProvider_default as BespokeUserProvider, withPageRoleAuthRequired as BespokeWithPageRoleAuthRequired, CMS_ROLES, DialogProvider, actions_exports as actions, storeWrapper, useAppDispatch as useBespokeDispatch, useAppSelector as useBespokeSelector, useUser_default as useBespokeUser, useDialog, useEmbed };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datawheel/bespoke",
-  "version": "0.6.0-rc.7",
+  "version": "0.6.0-rc.9",
   "description": "Content management system for creating automated data reports",
   "exports": {
     ".": {
@@ -52,6 +52,7 @@
     "@mantine/notifications": "^6.0.19",
     "@mantine/prism": "^6.0.19",
     "@monaco-editor/react": "^4.4.5",
+    "@newswire/frames": "^1.0.0",
     "@reduxjs/toolkit": "^1.8.4",
     "@tabler/icons-react": "^2.15.0",
     "@tiptap/extension-hard-break": "^2.2.2",