Update quick start documentation

packages/website/content/docs/quickstart.mdx

@@ -4,7 +4,8 @@ title: Quickstart
 
 The best way to get started is to try a simple example. Quill is initialized with a DOM element to contain the editor. The contents of that element will become the initial contents of Quill.
 
-```html
+  <Sandpack files={{
+  "/index.html":  `
 <!-- Include stylesheet -->
 <link href="{{site.cdn}}/quill.snow.css" rel="stylesheet" />
 
@@ -23,8 +24,9 @@ The best way to get started is to try a simple example. Quill is initialized wit
   const quill = new Quill('#editor', {
     theme: 'snow'
   });
-</script>
-```
+</script>`
+
+  }}/ >
 
 And that's all there is to it!
 

packages/website/gatsby-ssr.js

@@ -1,3 +1,15 @@
+const { getSandpackCssText } = require('@codesandbox/sandpack-react');
 const { wrapRootElement } = require('./root-wrapper');
 
 exports.wrapPageElement = wrapRootElement;
+exports.onRenderBody = ({ setHeadComponents }) => {
+  setHeadComponents([
+    <style
+      id="sandpack"
+      key="sandpack-css"
+      dangerouslySetInnerHTML={{
+        __html: getSandpackCssText(),
+      }}
+    />,
+  ]);
+};

packages/website/package.json

@@ -13,6 +13,7 @@
     "serve": "gatsby serve --port $npm_package_config_ports_gatsby"
   },
   "dependencies": {
+    "@codesandbox/sandpack-react": "^2.11.3",
     "@mdx-js/mdx": "^2.1.5",
     "@mdx-js/react": "^2.1.5",
     "babel-preset-gatsby": "^2.24.0",

packages/website/root-wrapper.js

@@ -1,6 +1,7 @@
 import { MDXProvider } from '@mdx-js/react';
 import { Highlight, themes } from 'prism-react-renderer';
 import CodePen from './src/components/CodePen';
+import Sandpack from './src/components/Sandpack';
 import Editor from './src/components/Editor';
 import {
   Heading1,
@@ -13,6 +14,7 @@ import {
 
 const components = {
   CodePen,
+  Sandpack,
   Editor,
   More: () => <div style={{ display: 'none' }}>{/* more */}</div>,
   h1: Heading1,

packages/website/src/components/Sandpack.jsx

@@ -0,0 +1,85 @@
+import { graphql, useStaticQuery } from 'gatsby';
+import {
+  SandpackProvider,
+  SandpackLayout,
+  SandpackCodeEditor,
+  SandpackPreview,
+  useSandpack,
+} from '@codesandbox/sandpack-react';
+import { useState } from 'react';
+import * as styles from './Sandpack.module.scss';
+
+const TogglePreviewButton = ({ isPreviewEnabled, setIsPreviewEnabled }) => {
+  const { sandpack } = useSandpack();
+
+  return (
+    <button
+      className={styles.togglePreviewButton}
+      onClick={() => {
+        if (!isPreviewEnabled) {
+          sandpack.runSandpack();
+        }
+        setIsPreviewEnabled(!isPreviewEnabled);
+      }}
+    >
+      {isPreviewEnabled ? 'Hide Preview' : 'Run Code'}
+    </button>
+  );
+};
+
+const Sandpack = ({ files, showConsole }) => {
+  const [isPreviewEnabled, setIsPreviewEnabled] = useState(false);
+  const [clientId, setClientId] = useState(null);
+
+  const data = useStaticQuery(graphql`
+    query {
+      site {
+        siteMetadata {
+          cdn
+        }
+      }
+    }
+  `);
+
+  const cdn = data?.site.siteMetadata.cdn;
+
+  return (
+    <div className={styles.container}>
+      <SandpackProvider
+        options={{ autorun: false, autoReload: false }}
+        template="static"
+        files={Object.keys(files).reduce(
+          (f, name) => ({
+            ...f,
+            [name]: files[name].replace(/\{\{site\.cdn\}\}/g, cdn).trim(),
+          }),
+          {},
+        )}
+      >
+        <div className={styles.bar}>
+          <TogglePreviewButton
+            isPreviewEnabled={isPreviewEnabled}
+            setIsPreviewEnabled={setIsPreviewEnabled}
+          />
+        </div>
+        <SandpackLayout>
+          <SandpackCodeEditor
+            showLineNumbers
+            wrapContent
+            showRunButton={false}
+          />
+          {isPreviewEnabled && (
+            <SandpackPreview
+              ref={(p) => {
+                setClientId(p?.clientId);
+              }}
+              showOpenInCodeSandbox={false}
+            />
+          )}
+        </SandpackLayout>
+      </SandpackProvider>
+    </div>
+  );
+};
+
+export default Sandpack;

packages/website/src/components/Sandpack.module.scss

@@ -0,0 +1,27 @@
+.container {
+  margin: 24px 0 32px;
+}
+
+.bar {
+  display: flex;
+  margin: 0 0 10px;
+
+  button {
+    border: 1px solid #ccc;
+    border-radius: 2px;
+    padding: 4px 8px;
+    transition: background 0.2s;
+
+    &:hover {
+      background: #fafafa;
+    }
+
+    &:active {
+      background: #eee;
+    }
+  }
+
+  .togglePreviewButton {
+    margin-left: auto;
+  }
+}