Improve previews in website

packages/website/content/docs/delta.mdx

@@ -125,7 +125,7 @@ Note that a Delta's instructions always starts at the beginning of the document.
 Play around with Quill and take a look at how its content and changes look. Open your developer console for another view into the Deltas.
 
 <SandpackWithQuillTemplate
-  showPreview
+  preferPreview
   afterEditor={`
   <pre id="playground" style="font-size: 12px">
   </pre>

packages/website/content/docs/formats.mdx

@@ -7,7 +7,7 @@ Quill supports a number of formats, both in UI controls and API calls.
 By default, all formats are enabled and allowed in a Quill editor. They can be configured with the [formats](/docs/configuration/#formats) option. This is separate from adding a control in the [Toolbar](/docs/modules/toolbar/). For example, you can configure Quill to allow bolded content to be pasted into an editor that has no bold button in the toolbar.
 
 <Sandpack
-  showPreview
+  preferPreview
   files={{
 'index.html': `
 <link href="/styles.css" rel="stylesheet" />

packages/website/content/docs/themes.mdx

@@ -23,7 +23,7 @@ Themes allow you to easily make your editor look good with minimal effort. Quill
 Bubble is a simple tooltip based theme.
 
 <Sandpack
-  showPreview
+  preferPreview
   files={{
     'index.html': `
 <link href="{{site.cdn}}/quill.bubble.css" rel="stylesheet" />
@@ -50,7 +50,7 @@ Bubble is a simple tooltip based theme.
 Snow is a clean, flat toolbar theme.
 
 <Sandpack
-  showPreview
+  preferPreview
   files={{
     'index.html': `
 <link href="{{site.cdn}}/quill.snow.css" rel="stylesheet" />

packages/website/content/guides/building-a-custom-module.mdx

@@ -19,7 +19,7 @@ At its core a word counter simply counts the number of words in the editor and d
 Let's jump straight in with a complete example!
 
 <Sandpack
-  showPreview
+  defaultShowPreview
   externalResources={[
     "{{site.cdn}}/quill.snow.css",
     "{{site.cdn}}/quill.js",
@@ -76,7 +76,7 @@ That's all it takes to add a custom module to Quill! A function can be [register
 Modules are passed an options object that can be used to fine tune the desired behavior. We can use this to accept a selector for the counter container instead of a hard-coded string. Let's also customize the counter to either count words or characters:
 
 <Sandpack
-  showPreview
+  defaultShowPreview
   externalResources={[
     "{{site.cdn}}/quill.snow.css",
     "{{site.cdn}}/quill.js",
@@ -137,7 +137,7 @@ const quill = new Quill('#editor', {
 Since any function can be registered as a Quill module, we could have implemented our counter as an ES5 constructor or ES6 class. This allows us to access and utilize the module directly.
 
 <Sandpack
-  showPreview
+  defaultShowPreview
   externalResources={[
     "{{site.cdn}}/quill.snow.css",
     "{{site.cdn}}/quill.js",
@@ -208,7 +208,7 @@ const quill = new Quill('#editor', {
 Now let's polish off the module in ES6 and fix a few pesky bugs. That's all there is to it!
 
 <Sandpack
-  showPreview
+  defaultShowPreview
   externalResources={[
     "{{site.cdn}}/quill.snow.css",
     "{{site.cdn}}/quill.js",

packages/website/content/guides/cloning-medium-with-parchment.mdx

@@ -12,7 +12,7 @@ Let's start without even using Quill, with just a textarea and button, hooked up
 
 <Sandpack
   externalResources={scope.externalResources}
-  showPreview
+  defaultShowPreview
   showFileTree
   files={{
     'index.html': `
@@ -67,7 +67,7 @@ Next, we'll replace the textarea with Quill core, absent of themes, formats and
 <Sandpack
   externalResources={scope.externalResources}
   showFileTree
-  showPreview
+  defaultShowPreview
   files={{
     'index.html': scope.html,
     'styles.css': `
@@ -138,7 +138,7 @@ Open your developer console and try out Quill's [APIs](/docs/api) on your new bo
 <Sandpack
   externalResources={scope.externalResources}
   showFileTree
-  showPreview
+  defaultShowPreview
   activeFile="index.js"
   files={{
     'index.html': scope.html,
@@ -205,7 +205,7 @@ Now we can hook our link button up to a fancy `prompt`, again to keep things sim
 <Sandpack
   externalResources={scope.externalResources}
   showFileTree
-  showPreview
+  defaultShowPreview
   activeFile="formats/linkBlot.js"
   files={{
     'index.html': scope.html,
@@ -275,7 +275,7 @@ Let's hook these new blots up to their respective buttons and add some CSS for t
 <Sandpack
   externalResources={scope.externalResources}
   showFileTree
-  showPreview
+  defaultShowPreview
   activeFile="formats/blockquoteBlot.js"
   files={{
     'index.html': scope.html,
@@ -350,7 +350,7 @@ Our click handler calls [`insertEmbed()`](/docs/api/#insertembed), which does no
 <Sandpack
   externalResources={scope.externalResources}
   showFileTree
-  showPreview
+  defaultShowPreview
   activeFile="formats/dividerBlot.js"
   files={{
     'index.html': scope.html,
@@ -440,7 +440,7 @@ class ImageBlot extends BlockEmbed {
 <Sandpack
   externalResources={scope.externalResources}
   showFileTree
-  showPreview
+  defaultShowPreview
   activeFile="formats/imageBlot.js"
   files={{
     'index.html': scope.html,
@@ -584,7 +584,7 @@ Note if you open your console and call [`getContents`](/docs/api/#getcontents),
 <Sandpack
   externalResources={scope.externalResources}
   showFileTree
-  showPreview
+  defaultShowPreview
   activeFile="formats/videoBlot.js"
   files={{
     'index.html': scope.html,
@@ -698,7 +698,7 @@ class TweetBlot extends BlockEmbed {
 <Sandpack
   externalResources={scope.externalResources}
   showFileTree
-  showPreview
+  defaultShowPreview
   activeFile="formats/tweetBlot.js"
   files={{
     'index.html': scope.html,

packages/website/src/components/MDX.jsx

@@ -14,7 +14,6 @@ import {
   Heading6,
 } from './Heading';
 import Hint from './Hint';
-import FullEditor from './standalone/FullEditor';
 import SEO from './SEO';
 
 const components = {
@@ -29,7 +28,6 @@ const components = {
   SandpackWithQuillTemplate,
   Hint,
   Editor,
-  FullEditor,
   pre: ({ children }) => {
     const className = children.props.className || '';
     const matches = className.match(/language-(?<lang>.*)/);

packages/website/src/components/Sandpack.jsx

@@ -6,14 +6,16 @@ import {
   useSandpack,
 } from '@codesandbox/sandpack-react';
 import { useEffect, useState } from 'react';
+import env from '../../env';
 import * as styles from './Sandpack.module.scss';
+import classNames from 'classnames';
 
 const TogglePreviewButton = ({ isPreviewEnabled, setIsPreviewEnabled }) => {
   const { sandpack } = useSandpack();
 
   return (
     <button
-      className={styles.togglePreviewButton}
+      className={styles.button}
       onClick={() => {
         if (!isPreviewEnabled) {
           sandpack.runSandpack();
@@ -26,20 +28,46 @@ const TogglePreviewButton = ({ isPreviewEnabled, setIsPreviewEnabled }) => {
   );
 };
 
+const ToggleCodeButton = ({ isCodeEnabled, setIsCodeEnabled }) => {
+  const { sandpack } = useSandpack();
+
+  return (
+    <button
+      className={styles.button}
+      onClick={() => {
+        if (!isCodeEnabled) {
+          sandpack.runSandpack();
+        }
+        setIsCodeEnabled(!isCodeEnabled);
+      }}
+    >
+      {isCodeEnabled ? 'Hide Code' : 'Show Code'}
+    </button>
+  );
+};
+
 const Sandpack = ({
-  showPreview,
+  defaultShowPreview,
+  preferPreview,
   files,
   visibleFiles,
   activeFile,
   externalResources,
   showFileTree,
+  defaultShowCode,
 }) => {
-  const [isPreviewEnabled, setIsPreviewEnabled] = useState(showPreview);
+  const [isPreviewEnabled, setIsPreviewEnabled] = useState(
+    preferPreview || defaultShowPreview,
+  );
+  const [isCodeEnabled, setIsCodeEnabled] = useState(
+    !preferPreview || defaultShowCode,
+  );
   const [isReady, setIsReady] = useState(false);
 
-  const cdn = process.env.cdn;
   const replaceCDN = (value) => {
-    return value.replace(/\{\{site\.cdn\}\}/g, cdn);
+    return value.replace(/\{\{site\.(\w+)\}\}/g, (_, matched) => {
+      return matched === 'cdn' ? process.env.cdn : env[matched];
+    });
   };
 
   useEffect(() => {
@@ -52,7 +80,7 @@ const Sandpack = ({
     <div className={styles.container} style={isReady ? {} : { opacity: '0' }}>
       <SandpackProvider
         options={{
-          autorun: showPreview,
+          autorun: defaultShowPreview,
           visibleFiles,
           activeFile,
           externalResources:
@@ -67,38 +95,60 @@ const Sandpack = ({
           {},
         )}
       >
-        <div className={styles.wrapper}>
-          <div className={styles.editorWrapper}>
-            <div className={styles.codeArea}>
-              {showFileTree && (
-                <div className={styles.fileTree}>
-                  <SandpackFileExplorer autoHiddenFiles />
-                </div>
-              )}
-              <div className={styles.editor}>
-                <SandpackCodeEditor
-                  showTabs={
-                    !showFileTree &&
-                    (visibleFiles
-                      ? visibleFiles.length > 1
-                      : Object.keys(files).length > 1)
-                  }
-                  wrapContent
-                  showRunButton={false}
+        <div
+          className={classNames(styles.wrapper, {
+            [styles.preferPreview]: preferPreview,
+          })}
+        >
+          {isPreviewEnabled && preferPreview && (
+            <div className={styles.previewWrapper}>
+              <div className={styles.preview}>
+                <SandpackPreview
+                  showOpenInCodeSandbox={false}
+                  showRefreshButton={false}
                 />
               </div>
-            </div>
-            {!showPreview && (
-              <div className={styles.editorFooter}>
-                <TogglePreviewButton
-                  defaultShowPreview={showPreview}
-                  isPreviewEnabled={isPreviewEnabled}
-                  setIsPreviewEnabled={setIsPreviewEnabled}
+              <div className={styles.footer}>
+                <ToggleCodeButton
+                  isCodeEnabled={isCodeEnabled}
+                  setIsCodeEnabled={setIsCodeEnabled}
                 />
               </div>
-            )}
-          </div>
-          {isPreviewEnabled && (
+            </div>
+          )}
+          {isCodeEnabled && (
+            <div className={styles.editorWrapper}>
+              <div className={styles.codeArea}>
+                {showFileTree && (
+                  <div className={styles.fileTree}>
+                    <SandpackFileExplorer autoHiddenFiles />
+                  </div>
+                )}
+                <div className={styles.editor}>
+                  <SandpackCodeEditor
+                    showTabs={
+                      !showFileTree &&
+                      (visibleFiles
+                        ? visibleFiles.length > 1
+                        : Object.keys(files).length > 1)
+                    }
+                    wrapContent
+                    showRunButton={false}
+                  />
+                </div>
+              </div>
+              {!preferPreview && (
+                <div className={styles.footer}>
+                  <TogglePreviewButton
+                    defaultShowPreview={defaultShowPreview}
+                    isPreviewEnabled={isPreviewEnabled}
+                    setIsPreviewEnabled={setIsPreviewEnabled}
+                  />
+                </div>
+              )}
+            </div>
+          )}
+          {isPreviewEnabled && !preferPreview && (
             <div className={styles.preview}>
               <SandpackPreview showOpenInCodeSandbox={false} />
             </div>