docs: switch to stackblitz (#614)

* switch to stackblitz

* fix

Author: YousefED

docs/components/example/ExampleBlock.tsx

@@ -1,20 +1,24 @@
 import dynamic from "next/dynamic";
-import { AiFillCodeSandboxCircle, AiFillGithub } from "react-icons/ai";
+import { AiFillGithub } from "react-icons/ai";
+import { SiStackblitz } from "react-icons/si";
 
 import { examples } from "./generated/exampleComponents.gen";
 import "./styles.css";
 
-const baseGitHubURL =
-  "https://github.com/TypeCellOS/BlockNote/tree/main/examples/";
-const baseCodeSandboxURL =
-  "https://githubbox.com/TypeCellOS/BlockNote/tree/main/examples/";
+const baseGitHubURL = "https://github.com/TypeCellOS/BlockNote/tree/main/";
+// const baseCodeSandboxURL =
+//   "https://githubbox.com/TypeCellOS/BlockNote/tree/main/";
+
+const baseStackBlitzURL =
+  "https://www.stackblitz.com/github/TypeCellOS/BlockNote/tree/main/";
 
 const ThemedExample = dynamic(() => import("./ThemedExample"), {
   ssr: false,
 });
 
 export function ExampleBlock(props: {
   name: keyof typeof examples;
+  path: string;
   children: any;
 }) {
   // const example = examplesFlattened.find((e) => e.slug === props.name);
@@ -25,24 +29,26 @@ export function ExampleBlock(props: {
   return (
     <div className="demo nx-bg-primary-700/5 dark:nx-bg-primary-300/10 mt-6 rounded-lg p-4">
       <div className={"flex flex-row gap-6 pb-4"}>
-        <button
+        <a
           className={
             "nx-select-none nx-text-gray-600 hover:nx-text-black dark:nx-text-gray-200 dark:hover:nx-text-white flex flex-row items-center gap-1"
           }
-          onClick={() => window.open(`${baseGitHubURL}${props.name}/`)}>
+          href={`${baseGitHubURL}${props.path}/`}
+          target="_blank">
           <AiFillGithub />
           <div className={"text-sm"}>GitHub</div>
-        </button>
-        <button
+        </a>
+        <a
           className={
             "nx-select-none nx-text-gray-600 hover:nx-text-black dark:nx-text-gray-200 dark:hover:nx-text-white flex flex-row items-center gap-1"
           }
-          onClick={() => window.open(`${baseCodeSandboxURL}${props.name}/`)}>
-          <AiFillCodeSandboxCircle />
-          <div className={"text-sm"}>CodeSandbox</div>
-        </button>
+          href={`${baseStackBlitzURL}${props.path}/`}
+          target="_blank">
+          <SiStackblitz />
+          <div className={"text-sm"}>StackBlitz</div>
+        </a>
       </div>
-      <div className={"h-96 overflow-auto rounded-lg"}>
+      <div className={"demo-contents h-96 overflow-auto rounded-lg"}>
         <ThemedExample name={props.name} />
       </div>
       {props.children}

docs/components/example/styles.css

@@ -1,27 +1,28 @@
 :focus-visible {
-    box-shadow: unset !important;
+  box-shadow: unset !important;
 }
 
 .demo .nextra-code-block pre {
-    background-color: transparent !important;
-    margin: 0 !important;
-    padding: 0 !important;
+  background-color: transparent !important;
+  margin: 0 !important;
+  padding: 0 !important;
 }
 
 .demo .nextra-code-block code > span {
-    padding: 0 !important;
+  padding: 0 !important;
 }
 
-.demo .bn-container, .demo .bn-editor {
-    height: 100%;
+.demo .bn-container,
+.demo .bn-editor {
+  height: 100%;
 }
 
 .demo .bn-editor {
-    overflow: auto;
-    padding-block: 1rem;
+  overflow: auto;
+  padding-block: 1rem;
 }
 
-.demo a {
-    color: revert;
-    text-decoration: revert;
-}
+.demo-contents a {
+  color: revert;
+  text-decoration: revert;
+}

docs/pages/examples/index.mdx

@@ -4,6 +4,6 @@ import { ExampleList } from "../../components/example/ExampleList";
 
 Browse through the examples below to see how to use and customize BlockNote.
 
-Want to contribute? Copy the [basic example on CodeSandbox](https://codesandbox.io/s/github/TypeCellOS/BlockNote/tree/main/examples/basic/minimal) and submit a PR.
+Want to contribute? Copy the [basic example on StackBlitz](https://stackblitz.com/github/TypeCellOS/BlockNote/tree/main/examples/01-basic/01-minimal/) and submit a PR.
 
 <ExampleList />

examples/01-basic/01-minimal/tsconfig.json

@@ -25,7 +25,7 @@
   "include": [
     "."
   ],
-  "references": [
+  "__ADD_FOR_LOCAL_DEV_references": [
     {
       "path": "../../../packages/core/"
     },

examples/01-basic/02-block-objects/tsconfig.json

@@ -25,7 +25,7 @@
   "include": [
     "."
   ],
-  "references": [
+  "__ADD_FOR_LOCAL_DEV_references": [
     {
       "path": "../../../packages/core/"
     },

examples/01-basic/03-all-blocks/tsconfig.json

@@ -25,7 +25,7 @@
   "include": [
     "."
   ],
-  "references": [
+  "__ADD_FOR_LOCAL_DEV_references": [
     {
       "path": "../../../packages/core/"
     },

examples/01-basic/04-selection-blocks/tsconfig.json

@@ -25,7 +25,7 @@
   "include": [
     "."
   ],
-  "references": [
+  "__ADD_FOR_LOCAL_DEV_references": [
     {
       "path": "../../../packages/core/"
     },

examples/01-basic/05-block-manipulation/tsconfig.json

@@ -25,7 +25,7 @@
   "include": [
     "."
   ],
-  "references": [
+  "__ADD_FOR_LOCAL_DEV_references": [
     {
       "path": "../../../packages/core/"
     },

examples/01-basic/06-file-uploading/tsconfig.json

@@ -25,7 +25,7 @@
   "include": [
     "."
   ],
-  "references": [
+  "__ADD_FOR_LOCAL_DEV_references": [
     {
       "path": "../../../packages/core/"
     },

examples/01-basic/07-saving-loading/tsconfig.json

@@ -25,7 +25,7 @@
   "include": [
     "."
   ],
-  "references": [
+  "__ADD_FOR_LOCAL_DEV_references": [
     {
       "path": "../../../packages/core/"
     },