update widget structure

src/containers/Home/index.tsx

@@ -176,9 +176,10 @@ const EmbedSection = () => (
         visitors, blog readers or anybody else!
       </Styles.StyledMinorTitle>
     </Styles.StyledSectionArea>
-    <div>
-      <Styles.StyledIframge src="https://jsoncrack.com/widget?json=%5B%5B%22squadName%22%2C%22homeTown%22%2C%22formed%22%2C%22secretBase%22%2C%22active%22%2C%22members%22%2C%22a%7C0%7C1%7C2%7C3%7C4%7C5%22%2C%22Super%20hero%20squad%22%2C%22Metro%20City%22%2C%22n%7CWW%22%2C%22Super%20tower%22%2C%22b%7CT%22%2C%22name%22%2C%22age%22%2C%22secretIdentity%22%2C%22powers%22%2C%22a%7CC%7CD%7CE%7CF%22%2C%22Molecule%20Man%22%2C%22n%7CT%22%2C%22Dan%20Jukes%22%2C%22Radiation%20resistance%22%2C%22Turning%20tiny%22%2C%22Radiation%20blast%22%2C%22a%7CK%7CL%7CM%22%2C%22o%7CG%7CH%7CI%7CJ%7CN%22%2C%22Madame%20Uppercut%22%2C%22n%7Cd%22%2C%22Jane%20Wilson%22%2C%22Million%20tonne%20punch%22%2C%22Damage%20resistance%22%2C%22Superhuman%20reflexes%22%2C%22a%7CS%7CT%7CU%22%2C%22o%7CG%7CP%7CQ%7CR%7CV%22%2C%22Eternal%20Flame%22%2C%22n%7C4C92%22%2C%22Unknown%22%2C%22Immortality%22%2C%22Heat%20Immunity%22%2C%22Inferno%22%2C%22Teleportation%22%2C%22Interdimensional%20travel%22%2C%22a%7Ca%7Cb%7Cc%7Cd%7Ce%22%2C%22o%7CG%7CX%7CY%7CZ%7Cf%22%2C%22a%7CO%7CW%7Cg%22%2C%22o%7C6%7C7%7C8%7C9%7CA%7CB%7Ch%22%5D%2C%22i%22%5D"></Styles.StyledIframge>
-    </div>
+    <Styles.StyledIframge
+      src="https://jsoncrack.com/widget"
+      data-json="%7B%0A%20%20%22squadName%22%3A%20%22aykut%20sara%C3%A7%22%2C%0A%20%20%22homeTown%22%3A%20%22Metro%20City%22%2C%0A%20%20%22formed%22%3A%202016%2C%0A%20%20%22secretBase%22%3A%20%22Super%20tower%22%2C%0A%20%20%22active%22%3A%20true%2C%0A%20%20%22members%22%3A%20%5B%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%22name%22%3A%20%22Molecule%20Man%22%2C%0A%20%20%20%20%20%20%22age%22%3A%2029%2C%0A%20%20%20%20%20%20%22secretIdentity%22%3A%20%22Dan%20Jukes%22%2C%0A%20%20%20%20%20%20%22powers%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%22Radiation%20resistance%22%2C%0A%20%20%20%20%20%20%20%20%22Turning%20tiny%22%2C%0A%20%20%20%20%20%20%20%20%22Radiation%20blast%22%0A%20%20%20%20%20%20%5D%0A%20%20%20%20%7D%2C%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%22name%22%3A%20%22Madame%20Uppercut%22%2C%0A%20%20%20%20%20%20%22age%22%3A%2039%2C%0A%20%20%20%20%20%20%22secretIdentity%22%3A%20%22Jane%20Wilson%22%2C%0A%20%20%20%20%20%20%22powers%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%22Million%20tonne%20punch%22%2C%0A%20%20%20%20%20%20%20%20%22Damage%20resistance%22%2C%0A%20%20%20%20%20%20%20%20%22Superhuman%20reflexes%22%0A%20%20%20%20%20%20%5D%0A%20%20%20%20%7D%2C%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%22name%22%3A%20%22Eternal%20Flame%22%2C%0A%20%20%20%20%20%20%22age%22%3A%201000000%2C%0A%20%20%20%20%20%20%22secretIdentity%22%3A%20%22Unknown%22%2C%0A%20%20%20%20%20%20%22powers%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%22Immortality%22%2C%0A%20%20%20%20%20%20%20%20%22Heat%20Immunity%22%2C%0A%20%20%20%20%20%20%20%20%22Inferno%22%2C%0A%20%20%20%20%20%20%20%20%22Teleportation%22%2C%0A%20%20%20%20%20%20%20%20%22Interdimensional%20travel%22%0A%20%20%20%20%20%20%5D%0A%20%20%20%20%7D%0A%20%20%5D%0A%7D"
+    ></Styles.StyledIframge>
   </Styles.StyledSection>
 );
 

src/containers/Modals/ShareModal/index.tsx

@@ -47,7 +47,9 @@ export const ShareModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
   const json = useConfig(state => state.json);
   const [encodedJson, setEncodedJson] = React.useState("");
 
-  const embedText = `<iframe src="${baseURL}/widget?json=${encodedJson}" width="512" height="384" style="border: 2px solid #b9bbbe; border-radius: 6px;"></iframe>`;
+  const embedText = `<iframe src="${baseURL}/widget" data-json="${encodeURIComponent(
+    json
+  )}" width="512" height="384" style="border: 2px solid #b9bbbe; border-radius: 6px;"></iframe>`;
   const shareURL = `${baseURL}/editor?json=${encodedJson}`;
 
   React.useEffect(() => {
@@ -88,17 +90,17 @@ export const ShareModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
                 </Button>
               </StyledFlex>
             </StyledContainer>
-            <StyledContainer>
-              Embed into your website
-              <StyledFlex>
-                <Input value={embedText} type="url" readOnly />
-                <Button status="SECONDARY" onClick={() => handleShare(embedText)}>
-                  Copy
-                </Button>
-              </StyledFlex>
-            </StyledContainer>
           </>
         )}
+        <StyledContainer>
+          Embed into your website
+          <StyledFlex>
+            <Input value={embedText} type="url" readOnly />
+            <Button status="SECONDARY" onClick={() => handleShare(embedText)}>
+              Copy
+            </Button>
+          </StyledFlex>
+        </StyledContainer>
       </Modal.Content>
       <Modal.Controls setVisible={setVisible}></Modal.Controls>
     </Modal>

src/pages/Widget/index.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
-import { decompress } from "compress-json";
 import { baseURL } from "src/constants/data";
 import useGraph from "src/hooks/store/useGraph";
 import { isValidJson } from "src/utils/isValidJson";
@@ -38,17 +37,22 @@ function inIframe() {
 }
 
 const WidgetPage = () => {
-  const { query, push } = useRouter();
+  const { push } = useRouter();
+  const [json, setJson] = React.useState<string | null>(null);
   const setGraphValue = useGraph(state => state.setGraphValue);
 
   React.useEffect(() => {
-    if (query.json) {
-      const jsonURI = decodeURIComponent(query.json as string);
+    const dataJson = window.self.frameElement?.getAttribute("data-json");
+    if (dataJson) setJson(dataJson);
+  }, []);
+
+  React.useEffect(() => {
+    if (json) {
+      const jsonURI = decodeURIComponent(json);
       const isJsonValid = isValidJson(jsonURI);
 
       if (isJsonValid) {
-        const jsonDecoded = decompress(JSON.parse(isJsonValid));
-        const { nodes, edges } = parser(JSON.stringify(jsonDecoded));
+        const { nodes, edges } = parser(jsonURI);
 
         setGraphValue("nodes", nodes);
         setGraphValue("edges", edges);
@@ -56,16 +60,12 @@ const WidgetPage = () => {
     }
 
     if (!inIframe()) push("/");
-  }, [push, query.json, setGraphValue]);
+  }, [push, json, setGraphValue]);
 
   return (
     <>
       <Graph isWidget />
-      <StyledAttribute
-        href={`${baseURL}/editor?json=${query.json}`}
-        target="_blank"
-        rel="noreferrer"
-      >
+      <StyledAttribute href={`${baseURL}/editor`} target="_blank" rel="noreferrer">
         jsoncrack.com
       </StyledAttribute>
     </>