diff --git a/package.json b/package.json index 39114ba..eec4202 100644 --- a/package.json +++ b/package.json @@ -157,7 +157,7 @@ "id": "markdown-block", "title": "Markdown", "description": "View markdown files. You can also view live repo into, using Issues, Releases, and Commits custom components, as well as live code examples with CodeSandbox.", - "sandbox": false, + "sandbox": true, "entry": "/src/blocks/file-blocks/live-markdown/index.tsx", "extensions": [ "md", @@ -238,6 +238,7 @@ "@githubnext/utils": "^0.15.4", "@githubocto/flat-ui": "^0.13.4", "@loadable/component": "^5.15.0", + "@mdx-js/runtime": "^2.0.0-next.9", "@octokit/rest": "^18.12.0", "@primer/components": "^31.1.0", "@react-three/drei": "^7.20.5", @@ -273,6 +274,7 @@ "react-syntax-highlighter": "^15.4.5", "react-use": "^17.3.1", "recharts": "^2.1.6", + "styled-components": "^5.3.3", "three": "^0.134.0" }, "resolutions": { diff --git a/src/blocks/file-blocks/live-markdown/CodeSandbox.tsx b/src/blocks/file-blocks/live-markdown/CodeSandbox.tsx new file mode 100644 index 0000000..4dfa8fa --- /dev/null +++ b/src/blocks/file-blocks/live-markdown/CodeSandbox.tsx @@ -0,0 +1,90 @@ +import { ReactNode, useEffect, useState } from "react"; +import LZString from "lz-string" + +const optionsDefaults = { + fontsize: "14", + hidenavigation: "1", + codemirror: "1", + hidedevtools: "1", +} +export const CodeSandbox = ({ + children, + height = "20em", + sandboxOptions = {}, + dependencies, +}: { + height: string | number; + theme: string; + sandboxOptions: Record; + children: ReactNode; + dependencies?: string[]; +}) => { + const [url, setUrl] = useState(""); + const parameters = getParameters({ + files: { + "index.js": { + // @ts-ignore + content: children?.props?.children?.props?.children, + isBinary: false, + }, + "package.json": { + content: JSON.stringify({ + // @ts-ignore + dependencies: parseDependencies(dependencies), + }), + isBinary: false, + }, + }, + }); + + const getSandboxUrl = async () => { + const url = `https://codesandbox.io/api/v1/sandboxes/define?parameters=${parameters}&json=1`; + const res = await fetch(url); + const data = await res.json(); + const id = data?.sandbox_id; + const params = new URLSearchParams({ ...optionsDefaults, ...sandboxOptions }).toString() + const iframeUrl = `https://codesandbox.io/embed/${id}?${params}`; + + setUrl(iframeUrl); + }; + useEffect(() => { + getSandboxUrl(); + }, []); + + return ( +
+ {!!url && ( +