eval code examples in documentation

src/API.ts

@@ -41,6 +41,7 @@ export class UserAPI {
    */
 
   private variables: { [key: string]: any } = {};
+  public codeExamples: { [key: string]: string } = {};
   private counters: { [key: string]: any } = {};
   private _drunk: DrunkWalk = new DrunkWalk(-100, 100, false);
   public randomGen = Math.random;
@@ -52,21 +53,18 @@ export class UserAPI {
   MidiConnection: MidiConnection = new MidiConnection();
   load: samples;
 
-  constructor(public app: Editor) {
-    //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
-	  );
-	};
+  constructor(public app: Editor) {}
 
+  _playDocExample = (code?: string) => {
+    this.play();
+    console.log("Executing documentation example: " + this.app.selectedExample);
+    this.app.universes[this.app.selected_universe as string].global.candidate =
+      code ? code : (this.app.selectedExample as string);
+    tryEvaluate(
+      this.app,
+      this.app.universes[this.app.selected_universe as string].global
+    );
+  };
 
   _all_samples = (): object => {
     return soundMap.get();

src/Documentation.ts

@@ -37,38 +37,30 @@ const injectAvailableSamples = (application: Editor): string => {
 };
 
 export const documentation_factory = (application: Editor) => {
-  function convert(template: string): string {
-    // Escape special characters in the string
-    const escapedString = template
-      .replace(/\\/g, "\\\\")
-      .replace(/'/g, "\\'")
-      .replace(/"/g, '\\"');
+  let counter = 0; // Counter to generate unique IDs for code snippets
 
-    // Split the template string by line breaks
-    const lines = escapedString.split("\n");
-
-    // Concatenate the lines using the + operator
-    const concatenatedString = lines.map((line) => `'${line}'`).join(" +\n");
-
-    return concatenatedString;
-  }
+  // Initialize a data structure to store code examples by their unique IDs
+  application.api.codeExamples = {};
 
   const makeExample = (
     description: string,
     code: string,
     open: boolean = false
   ): string => {
+    const codeId = `codeExample${counter++}`;
+
+    // Store the code snippet in the data structure
+    application.api.codeExamples[codeId] = code;
+
     return `
 <details ${open ? "open" : ""}>
-<summary>${description}<button class="inline-block pl-2" onclick="()=>_executeCodeExample(${convert(
-      code
-    )})()">&#9654;</button>
-<button class="inline-block pl-2" onclick="(()=>stop)()">&#10074;&#10074;</button>
-</summary>
-
-\`\`\`javascript
-${code}
-\`\`\`
+  <summary>${description}
+    <button class="inline-block pl-2" onclick="app.api._playDocExample(app.api.codeExamples['${codeId}'])">&#9654;</button>
+    <button class="inline-block pl-2" onclick="stop()">&#10074;&#10074;</button>
+  </summary>
+  \`\`\`javascript
+  ${code}
+  \`\`\`
 </details>
 `;
   };
@@ -99,7 +91,7 @@ ${makeExample(
   "Drums and arpeggios",
   `
 bpm(80)
-mod(0.25) :: sound('sawtooth')
+mod(0.25) && sound('sawtooth')
   .note(seqbar(
     [60, 67, 63].pick() - 12,  [60, 67, 63].pick() - 12, 
     [60, 67, 63].pick() - 12 + 5, [60, 67, 63].pick() - 12 + 5,

src/main.ts

@@ -78,6 +78,7 @@ export class Editor {
   userPlugins: Extension[] = [];
   state: EditorState;
   api: UserAPI;
+  selectedExample: string | null = "";
   docs: { [key: string]: string } = {};
 
   // Audio stuff
@@ -677,13 +678,8 @@ export class Editor {
     const converted_markdown = converter.makeHtml(
       this.docs[this.currentDocumentationPane]
     );
-    function wrapCodeWithPre(inputString: string): string {
-      let newString = inputString.replace(/<code>/g, "<pre><code>");
-      newString = newString.replace(/<\/code>/g, "</code></pre>");
-      return newString;
-    }
     document.getElementById("documentation-content")!.innerHTML =
-      wrapCodeWithPre(converted_markdown);
+      converted_markdown;
   }
 
   changeToLocalBuffer(i: number) {