Misc Playground/Docs fixes

packages/docs/src/.vitepress/theme/components/CodeSandbox.vue

@@ -373,7 +373,7 @@ defineExpose({
   display: flex;
   flex-direction: column;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  margin-bottom: 1em;
+  overflow-y: hidden;
 }
 
 .editor-container {
@@ -385,20 +385,6 @@ defineExpose({
   overflow: hidden; /* Contain overflow */
 }
 
-.editor-container .ace_editor {
-  background: transparent !important;
-  font-family: var(--vp-font-family-mono);
-  line-height: var(--vp-code-line-height);
-  font-size: var(--vp-code-font-size);
-  flex: 1 1 auto; /* Allow editor to grow */
-  overflow: auto; /* Enable scrolling */
-  min-height: 3em;
-}
-
-.editor-container .ace_editor .ace_gutter {
-  background: transparent !important;
-}
-
 .editor-buttons {
   position: absolute;
   padding:10px;

packages/docs/src/.vitepress/theme/components/CodeSandboxTemplate.html

@@ -3,7 +3,13 @@
   <head>
     <meta charset="utf-8" />
     <title>Code Sandbox</title>
-    <script>
+    <script type="module">
+      // NOTE: We want to be able to console.log, etc, structures that contain bigint and also Uint8Array.
+      //       Thus, JSON.stringify isn't sufficient (it cannot do bigint and Uint8Array output is cumbersome).
+      //       So we import our encodeExtendedJson function and use that in place of JSON.stringify.
+      // TODO: We want to find a nicer way to include the latest version.
+      import { encodeExtendedJson } from 'https://cdn.jsdelivr.net/npm/@xocash/primitives@0.0.2-development.210/+esm';
+
       // Override console methods to capture and post messages to parent
       const originalConsole = window.console;
 
@@ -17,7 +23,9 @@
               type: 'log',
               content: args
                 .map((arg) =>
-                  typeof arg === 'object' ? JSON.stringify(arg) : String(arg),
+                  typeof arg === 'object'
+                    ? encodeExtendedJson(arg, 2)
+                    : String(arg),
                 )
                 .join(' '),
             },
@@ -33,7 +41,9 @@
               type: 'info',
               content: args
                 .map((arg) =>
-                  typeof arg === 'object' ? JSON.stringify(arg) : String(arg),
+                  typeof arg === 'object'
+                    ? encodeExtendedJson(arg, 2)
+                    : String(arg),
                 )
                 .join(' '),
             },
@@ -49,7 +59,9 @@
               type: 'warn',
               content: args
                 .map((arg) =>
-                  typeof arg === 'object' ? JSON.stringify(arg) : String(arg),
+                  typeof arg === 'object'
+                    ? encodeExtendedJson(arg, 2)
+                    : String(arg),
                 )
                 .join(' '),
             },
@@ -65,7 +77,9 @@
               type: 'error',
               content: args
                 .map((arg) =>
-                  typeof arg === 'object' ? JSON.stringify(arg) : String(arg),
+                  typeof arg === 'object'
+                    ? encodeExtendedJson(arg, 2)
+                    : String(arg),
                 )
                 .join(' '),
             },
@@ -106,7 +120,7 @@
     <script type="module">
       // Execute user code directly at top level to support ES6 imports
       // Error handling is managed by global error handlers above
-        __userCode__;
+      __userCode__;
     </script>
   </body>
 </html>