From 9d5990186cbf501a41b3414ddc0625ef4d93ba3c Mon Sep 17 00:00:00 2001
From: Raphael Forment <raphael.forment@gmail.com>
Date: Sat, 26 Aug 2023 20:40:08 +0200
Subject: [PATCH] docs execution test

---
 src/API.ts           | 12 ++++++++++++
 src/Documentation.ts | 34 +++++++++++++++++++---------------
 2 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/src/API.ts b/src/API.ts
index 8c34097..7c14d5a 100644
--- a/src/API.ts
+++ b/src/API.ts
@@ -56,6 +56,18 @@ export class UserAPI {
     //this.load = samples("github:tidalcycles/Dirt-Samples/master");
   }
 
+	_executeCodeExample = (code: string) => {
+	  console.log("Executing documentation example");
+	  this.app.universes[
+	    this.app.selected_universe as string
+	  ].global.candidate = code as string;
+	  tryEvaluate(
+	    this.app,
+	    this.app.universes[this.app.selected_universe as string].global
+	  );
+	};
+
+
   _all_samples = (): object => {
     return soundMap.get();
   };
diff --git a/src/Documentation.ts b/src/Documentation.ts
index d30186a..d00d55e 100644
--- a/src/Documentation.ts
+++ b/src/Documentation.ts
@@ -1,24 +1,10 @@
 import { type Editor } from "./main";
+import { tryEvaluate } from "./Evaluator";
 
 const key_shortcut = (shortcut: string): string => {
   return `<kbd class="lg:px-2 lg:py-1.5 px-1 py-1 lg:text-sm text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500">${shortcut}</kbd>`;
 };
 
-const makeExample = (
-  description: string,
-  code: string,
-  open: boolean = false
-): string => {
-  return `
-<details ${open ? "open" : ""}>
-	<summary>${description}</summary>
-\`\`\`javascript
-${code}
-\`\`\`
-</details>
-`;
-};
-
 const samples_to_markdown = (samples: object) => {
   let markdownList = "";
   let keys = Object.keys(samples);
@@ -51,6 +37,24 @@ const injectAvailableSamples = (application: Editor): string => {
 };
 
 export const documentation_factory = (application: Editor) => {
+  const makeExample = (
+    description: string,
+    code: string,
+    open: boolean = false
+  ): string => {
+    return `
+<details ${open ? "open" : ""}>
+<summary>${description}<button class="inline-block pl-2" onclick="(()=>_executeCodeExample(${code})})()">▶</button>
+<button class="inline-block pl-2" onclick="(()=>stop)()">⏹</button>
+</summary>
+
+\`\`\`javascript
+${code}
+\`\`\`
+</details>
+`;
+  };
+
   const introduction: string = `
 # Welcome