update embed

src/pages/docs.tsx

@@ -15,9 +15,9 @@ const SyntaxHighlighter = dynamic(
 
 const StyledFrame = styled.iframe`
   border: none;
-  width: 100%;
-  height: 400px;
-  flex: 1;
+  width: 80%;
+  flex: 500px;
+  margin: 3% auto;
 `;
 
 const StyledPage = styled.div`
@@ -35,6 +35,7 @@ const StyledDescription = styled.div``;
 
 const StyledContentBody = styled.div`
   display: flex;
+  flex-direction: column;
   flex-wrap: wrap;
   gap: 15px;
   line-height: 1.8;
@@ -69,6 +70,7 @@ const Docs = () => {
           < Go Back
         </Button>
         <h1>Documentation</h1>
+        <iframe id="jsoncrackEmbed" src="//localhost:3000/widget" width="100%" height="100%"></iframe>
         <StyledContent>
           <h2># Fetching from URL</h2>
           <StyledContentBody>

src/store/useJson.tsx

@@ -25,6 +25,14 @@ const initialStates = {
   hasError: false,
 };
 
+function inIframe() {
+  try {
+    return window.self !== window.top;
+  } catch (e) {
+    return true;
+  }
+}
+
 export type JsonStates = typeof initialStates;
 
 const useJson = create<JsonStates & JsonActions>()((set, get) => ({
@@ -67,8 +75,13 @@ const useJson = create<JsonStates & JsonActions>()((set, get) => ({
       }
     }
 
-    useGraph.getState().setGraph(defaultJson);
-    set({ json: defaultJson, loading: false });
+    if (inIframe()) {
+      useGraph.getState().setGraph("[]");
+      return set({ json: "[]", loading: false });
+    } else {
+      useGraph.getState().setGraph(defaultJson);
+      set({ json: defaultJson, loading: false });
+    }
   },
   setJson: json => {
     useGraph.getState().setGraph(json);