From 8465f4d390e6c7d4c813070009ae4c3b8e0a3655 Mon Sep 17 00:00:00 2001
From: Simon-L <lumis@xulepth.fr>
Date: Sat, 25 Nov 2023 01:56:24 +0100
Subject: [PATCH 01/13] Add passive attribute for read-only editor

---
 README.md           |   3 +
 index.html          |  13 ++
 src/common.ts       |   4 +-
 src/editor.ts       |   3 +-
 src/faust-editor.ts | 379 ++++++++++++++++++++++++--------------------
 5 files changed, 225 insertions(+), 177 deletions(-)

diff --git a/README.md b/README.md
index be4af43..88122e5 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,12 @@
 # faust-web-component
 
+> :warning: This is a fork!
+
 This package provides two [web components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) for embedding interactive [Faust](https://faust.grame.fr) snippets in web pages.
 
 - `<faust-editor>` displays an editor (using [CodeMirror 6](https://codemirror.net/)) with executable, editable Faust code, along with some bells & whistles (controls, block diagram, plots) in a side pane.
 This component is ideal for demonstrating some code in Faust and allowing the reader to try it out and tweak it themselves without having to leave the page. (For more extensive work, it also includes a button to open the code in the Faust IDE.)
+    * `passive` attributes disables playback and makes editor read-only
 
 - `<faust-widget>` just shows the controls and does not allow editing, so it serves simply as a way to embed interactive DSP.
 
diff --git a/index.html b/index.html
index 43600e4..a83487e 100644
--- a/index.html
+++ b/index.html
@@ -45,6 +45,19 @@
             <faust-editor>
                 <!--
 import("stdfaust.lib");
+process = 
+    dm.cubicnl_demo : // distortion 
+    dm.wah4_demo <: // wah pedal
+    dm.phaser2_demo : // stereo phaser 
+    dm.compressor_demo : // stereo compressor
+    dm.zita_light; // stereo reverb
+                -->
+            </faust-editor>
+            <p>Excepteur sint occaecat cupidatat non proident, sunt meserunt mollit id est laborum.</p>
+            <faust-editor passive>
+                <!--
+// This editor is "passive", it's read-only and doesn't offer playback
+import("stdfaust.lib");
 process = 
     dm.cubicnl_demo : // distortion 
     dm.wah4_demo <: // wah pedal
diff --git a/src/common.ts b/src/common.ts
index 679bbbb..0af0b94 100644
--- a/src/common.ts
+++ b/src/common.ts
@@ -3,9 +3,9 @@ import jsURL from "@grame/faustwasm/libfaust-wasm/libfaust-wasm.js?url"
 import dataURL from "@grame/faustwasm/libfaust-wasm/libfaust-wasm.data?url"
 import wasmURL from "@grame/faustwasm/libfaust-wasm/libfaust-wasm.wasm?url"
 import { library } from "@fortawesome/fontawesome-svg-core"
-import { faPlay, faStop, faUpRightFromSquare, faSquareCaretLeft, faAnglesLeft, faAnglesRight, faSliders, faDiagramProject, faWaveSquare, faChartLine, faPowerOff } from "@fortawesome/free-solid-svg-icons"
+import { faPlay, faStop, faUpRightFromSquare, faSquareCaretLeft, faAnglesLeft, faAnglesRight, faSliders, faDiagramProject, faWaveSquare, faChartLine, faPowerOff, faCopy } from "@fortawesome/free-solid-svg-icons"
 
-for (const icon of [faPlay, faStop, faUpRightFromSquare, faSquareCaretLeft, faAnglesLeft, faAnglesRight, faSliders, faDiagramProject, faWaveSquare, faChartLine, faPowerOff]) {
+for (const icon of [faPlay, faStop, faUpRightFromSquare, faSquareCaretLeft, faAnglesLeft, faAnglesRight, faSliders, faDiagramProject, faWaveSquare, faChartLine, faPowerOff, faCopy]) {
     library.add(icon)
 }
 
diff --git a/src/editor.ts b/src/editor.ts
index 6559d57..23e654f 100644
--- a/src/editor.ts
+++ b/src/editor.ts
@@ -32,7 +32,7 @@ const faustLanguage = StreamLanguage.define(clike({
     }
 }))
 
-export function createEditor(parent: HTMLElement, doc: string) {
+export function createEditor(parent: HTMLElement, doc: string, editable: boolean = true) {
     return new EditorView({
         parent,
         doc,
@@ -63,6 +63,7 @@ export function createEditor(parent: HTMLElement, doc: string) {
                 ...lintKeymap
             ]),
             faustLanguage,
+            EditorView.editable.of(editable)
         ],
     })
 }
diff --git a/src/faust-editor.ts b/src/faust-editor.ts
index 612907a..91771fe 100644
--- a/src/faust-editor.ts
+++ b/src/faust-editor.ts
@@ -8,218 +8,225 @@ import { createEditor, setError, clearError } from "./editor"
 import { Scope } from "./scope"
 import faustSvg from "./faustText.svg"
 
-const template = document.createElement("template")
-template.innerHTML = `
-<div id="root">
-    <div id="controls">
-        <button title="Run" class="button" id="run" disabled>${icon({ prefix: "fas", iconName: "play" }).html[0]}</button>
-        <button title="Stop" class="button" id="stop" disabled>${icon({ prefix: "fas", iconName: "stop" }).html[0]}</button>
-        <a title="Open in Faust IDE" id="ide" href="https://faustide.grame.fr/" class="button" target="_blank">${icon({ prefix: "fas", iconName: "up-right-from-square" }).html[0]}</a>
-        <select id="audio-input" class="dropdown" disabled>
-            <option>Audio input</option>
-        </select>
-        <!-- TODO: MIDI input
-        <select id="midi-input" class="dropdown" disabled>
-            <option>MIDI input</option>
-        </select>
-        -->
-        <!-- TODO: volume control? <input id="volume" type="range" min="0" max="100"> -->
-        <a title="Faust website" id="faust" href="https://faust.grame.fr/" target="_blank"><img src="${faustSvg}" height="15px" /></a>
-    </div>
-    <div id="content">
-        <div id="editor"></div>
-        <div id="sidebar">
-            <div id="sidebar-buttons">
-                <button title="Controls" id="tab-ui" class="button tab" disabled>${icon({ prefix: "fas", iconName: "sliders" }).html[0]}</button>
-                <button title="Block Diagram" id="tab-diagram" class="button tab" disabled>${icon({ prefix: "fas", iconName: "diagram-project" }).html[0]}</button>
-                <button title="Scope" id="tab-scope" class="button tab" disabled>${icon({ prefix: "fas", iconName: "wave-square" }).html[0]}</button>
-                <button title="Spectrum" id="tab-spectrum" class="button tab" disabled>${icon({ prefix: "fas", iconName: "chart-line" }).html[0]}</button>
-            </div>
-            <div id="sidebar-content">
-                <div id="faust-ui"></div>
-                <div id="faust-diagram"></div>
-                <div id="faust-scope"></div>
-                <div id="faust-spectrum"></div>
+function editorTemplate(passive: boolean = false) {
+    const hidden = passive ? "hidden" : ""
+    const template = document.createElement("template")
+    template.innerHTML = `
+    <div id="root">
+        <div id="controls">
+            <button title="Run" class="button" id="run" disabled ${hidden}>${icon({ prefix: "fas", iconName: "play" }).html[0]}</button>
+            <button title="Stop" class="button" id="stop" disabled ${hidden}>${icon({ prefix: "fas", iconName: "stop" }).html[0]}</button>
+            <a title="Open in Faust IDE" id="ide" href="https://faustide.grame.fr/" class="button" target="_blank">${icon({ prefix: "fas", iconName: "up-right-from-square" }).html[0]}</a>
+            <button title="Copy" class="button" id="copy">${icon({ prefix: "fas", iconName: "copy" }).html[0]}</button>
+            <select id="audio-input" class="dropdown" disabled ${hidden}>
+                <option>Audio input</option>
+            </select>
+            <!-- TODO: MIDI input
+            <select id="midi-input" class="dropdown" disabled>
+                <option>MIDI input</option>
+            </select>
+            -->
+            <!-- TODO: volume control? <input id="volume" type="range" min="0" max="100"> -->
+            <a title="Faust website" id="faust" href="https://faust.grame.fr/" target="_blank"><img src="${faustSvg}" height="15px" /></a>
+        </div>
+        <div id="content">
+            <div id="editor"></div>
+            <div id="sidebar">
+                <div id="sidebar-buttons">
+                    <button title="Controls" id="tab-ui" class="button tab" disabled>${icon({ prefix: "fas", iconName: "sliders" }).html[0]}</button>
+                    <button title="Block Diagram" id="tab-diagram" class="button tab" disabled>${icon({ prefix: "fas", iconName: "diagram-project" }).html[0]}</button>
+                    <button title="Scope" id="tab-scope" class="button tab" disabled>${icon({ prefix: "fas", iconName: "wave-square" }).html[0]}</button>
+                    <button title="Spectrum" id="tab-spectrum" class="button tab" disabled>${icon({ prefix: "fas", iconName: "chart-line" }).html[0]}</button>
+                </div>
+                <div id="sidebar-content" >
+                    <div id="faust-ui"></div>
+                    <div id="faust-diagram"></div>
+                    <div id="faust-scope"></div>
+                    <div id="faust-spectrum"></div>
+                </div>
             </div>
         </div>
     </div>
-</div>
-<style>
-    #root {
-        border: 1px solid black;
-        border-radius: 5px;
-        box-sizing: border-box;
-    }
+    <style>
+        #root {
+            border: 1px solid black;
+            border-radius: 5px;
+            box-sizing: border-box;
+        }
 
-    *, *:before, *:after {
-        box-sizing: inherit; 
-    }
+        *, *:before, *:after {
+            box-sizing: inherit; 
+        }
 
-    #controls {
-        background-color: #384d64;
-        border-bottom: 1px solid black;
-        display: flex;
-    }
+        #controls {
+            background-color: #384d64;
+            border-bottom: 1px solid black;
+            display: flex;
+        }
 
-    #faust {
-        margin-left: auto;
-        margin-right: 10px;
-        display: flex;
-        align-items: center;
-    }
+        #faust {
+            margin-left: auto;
+            margin-right: 10px;
+            display: flex;
+            align-items: center;
+        }
 
-    #faust-ui {
-        width: 232px;
-        max-height: 150px;
-    }
+        #faust-ui {
+            width: 232px;
+            max-height: 150px;
+        }
 
-    #faust-scope, #faust-spectrum {
-        min-width: 232px;
-        min-height: 150px;
-    }
+        #faust-scope, #faust-spectrum {
+            min-width: 232px;
+            min-height: 150px;
+        }
 
-    #faust-diagram {
-        max-width: 232px;
-        height: 150px;
-    }
+        #faust-diagram {
+            max-width: 232px;
+            height: 150px;
+        }
 
-    #content {
-        display: flex;
-    }
+        #content {
+            display: flex;
+        }
 
-    #editor {
-        flex-grow: 1;
-        overflow-y: auto;
-    }
+        #editor {
+            flex-grow: 1;
+            overflow-y: auto;
+        }
 
-    #editor .cm-editor {
-        height: 100%;
-    }
+        #editor .cm-editor {
+            height: 100%;
+        }
 
-    .cm-diagnostic {
-        font-family: monospace;
-    }
+        .cm-diagnostic {
+            font-family: monospace;
+        }
 
-    .cm-diagnostic-error {
-        background-color: #fdf2f5 !important;
-        color: #a4000f !important;
-        border-color: #a4000f !important;
-    }
+        .cm-diagnostic-error {
+            background-color: #fdf2f5 !important;
+            color: #a4000f !important;
+            border-color: #a4000f !important;
+        }
 
-    #sidebar {
-        display: flex;
-        max-width: 100%;
-    }
+        #sidebar {
+            display: flex;
+            max-width: 100%;
+        }
 
-    .tab {
-        flex-grow: 1;
-    }
+        .tab {
+            flex-grow: 1;
+        }
 
-    #sidebar-buttons .tab.active {
-        background-color: #bbb;
-    }
+        #sidebar-buttons .tab.active {
+            background-color: #bbb;
+        }
 
-    #sidebar-buttons {
-        background-color: #f5f5f5;
-        display: flex;
-        flex-direction: column;
-    }
+        #sidebar-buttons {
+            background-color: #f5f5f5;
+            display: flex;
+            flex-direction: column;
+        }
 
-    #sidebar-buttons .button {
-        background-color: #f5f5f5;
-        color: #000;
-        width: 20px;
-        height: 20px;
-        padding: 4px;
-    }
+        #sidebar-buttons .button {
+            background-color: #f5f5f5;
+            color: #000;
+            width: 20px;
+            height: 20px;
+            padding: 4px;
+        }
 
-    #sidebar-buttons .button:hover {
-        background-color: #ddd;
-    }
+        #sidebar-buttons .button:hover {
+            background-color: #ddd;
+        }
 
-    #sidebar-buttons .button:active {
-        background-color: #aaa;
-    }
+        #sidebar-buttons .button:active {
+            background-color: #aaa;
+        }
 
-    #sidebar-content {
-        background-color: #fff;
-        border-left: 1px solid #ccc;
-        overflow: auto;
-        flex-grow: 1;
-        max-height: 100%;
-    }
+        #sidebar-content {
+            background-color: #fff;
+            border-left: 1px solid #ccc;
+            overflow: auto;
+            flex-grow: 1;
+            max-height: 100%;
+        }
 
-    #sidebar-content > div {
-        display: none;
-    }
+        #sidebar-content > div {
+            display: none;
+        }
 
-    #sidebar-content > div.active {
-        display: block;
-    }
+        #sidebar-content > div.active {
+            display: block;
+        }
 
-    a.button {
-        appearance: button;
-    }
+        a.button {
+            appearance: button;
+        }
 
-    .button {
-        background-color: #384d64;
-        border: 0;
-        padding: 5px;
-        width: 25px;
-        height: 25px;
-        color: #fff;
-    }
+        .button {
+            background-color: #384d64;
+            border: 0;
+            padding: 5px;
+            width: 25px;
+            height: 25px;
+            color: #fff;
+        }
 
-    .button:hover {
-        background-color: #4b71a1;
-    }
+        .button:hover {
+            background-color: #4b71a1;
+        }
 
-    .button:active {
-        background-color: #373736;
-    }
+        .button:active {
+            background-color: #373736;
+        }
 
-    .button:disabled {
-        opacity: 0.65;
-        cursor: not-allowed;
-        pointer-events: none;
-    }
+        .button:disabled {
+            opacity: 0.65;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
 
-    #controls > .button > svg {
-        width: 15px;
-        height: 15px;
-        vertical-align: top;
-    }
+        #controls > .button > svg {
+            width: 15px;
+            height: 15px;
+            vertical-align: top;
+        }
 
-    .dropdown {
-        height: 19px;
-        margin: 3px 0 3px 10px;
-        border: 0;
-        background: #fff;
-    }
+        .dropdown {
+            height: 19px;
+            margin: 3px 0 3px 10px;
+            border: 0;
+            background: #fff;
+        }
 
-    .gutter {
-        background-color: #f5f5f5;
-        background-repeat: no-repeat;
-        background-position: 50%;
-    }
-    
-    .gutter.gutter-horizontal {
-        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
-        cursor: col-resize;
-    }
+        .gutter {
+            background-color: #f5f5f5;
+            background-repeat: no-repeat;
+            background-position: 50%;
+        }
+        
+        .gutter.gutter-horizontal {
+            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
+            cursor: col-resize;
+        }
 
-    ${faustCSS}
-</style>
-`
+        ${faustCSS}
+    </style>
+    `
+    return template
+}
 
 export default class FaustEditor extends HTMLElement {
     constructor() {
         super()
     }
+    
+    passive = false
 
     connectedCallback() {
         const code = this.innerHTML.replace("<!--", "").replace("-->", "").trim()
-        this.attachShadow({ mode: "open" }).appendChild(template.content.cloneNode(true))
+        this.attachShadow({ mode: "open" }).appendChild(editorTemplate(this.passive).content.cloneNode(true))
 
         const ideLink = this.shadowRoot!.querySelector("#ide") as HTMLAnchorElement
         ideLink.onfocus = () => {
@@ -230,10 +237,11 @@ export default class FaustEditor extends HTMLElement {
         }
 
         const editorEl = this.shadowRoot!.querySelector("#editor") as HTMLDivElement
-        const editor = createEditor(editorEl, code)
+        const editor = createEditor(editorEl, code, !this.passive)
 
         const runButton = this.shadowRoot!.querySelector("#run") as HTMLButtonElement
         const stopButton = this.shadowRoot!.querySelector("#stop") as HTMLButtonElement
+        const copyButton = this.shadowRoot!.querySelector("#copy") as HTMLButtonElement
         const faustUIRoot = this.shadowRoot!.querySelector("#faust-ui") as HTMLDivElement
         const faustDiagram = this.shadowRoot!.querySelector("#faust-diagram") as HTMLDivElement
         const sidebar = this.shadowRoot!.querySelector("#sidebar") as HTMLDivElement
@@ -244,7 +252,7 @@ export default class FaustEditor extends HTMLElement {
         const split = Split([editorEl, sidebar], {
             sizes: [100, 0],
             minSize: [0, 20],
-            gutterSize: 7,
+            gutterSize: this.passive ? 0 : 7,
             snapOffset: 150,
             onDragEnd: () => { scope?.onResize(); spectrum?.onResize() },
         })
@@ -414,7 +422,15 @@ export default class FaustEditor extends HTMLElement {
         for (const [i, tabButton] of tabButtons.entries()) {
             tabButton.onclick = () => openTab(i)
         }
-
+        
+        copyButton.onclick = () => {
+            if (navigator.clipboard) {
+                navigator.clipboard.writeText(editor.state.doc.toString())
+            } else {
+                console.log("Unable to use clipboard")
+            }
+        }
+        
         stopButton.onclick = () => {
             if (node !== undefined) {
                 node.disconnect()
@@ -479,5 +495,20 @@ export default class FaustEditor extends HTMLElement {
         }
 
         audioInputSelector.onchange = connectInput
+        
+        if (this.passive) {
+            sidebar.remove()
+        }
     }
+    
+    attributeChangedCallback(name, oldValue, newValue) {
+      if ((name ==  "passive") && (newValue != null)) {
+          this.passive = true
+      }
+    }
+    
+    static get observedAttributes() {
+      return ["passive"];
+    }
+
 }

From 164d7dbe61a0176d821e5da2ee201e04cd0f5e78 Mon Sep 17 00:00:00 2001
From: Simon-L <lumis@xulepth.fr>
Date: Fri, 1 Dec 2023 04:34:33 +0100
Subject: [PATCH 02/13] Update

---
 README.md                 |   7 +-
 src/faust-editor-basic.ts | 172 ++++++++++++++++++++++++++++++++++++++
 src/faust-editor.ts       |  20 ++++-
 src/main.ts               |   2 +
 4 files changed, 197 insertions(+), 4 deletions(-)
 create mode 100644 src/faust-editor-basic.ts

diff --git a/README.md b/README.md
index 88122e5..3a28303 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,11 @@
 # faust-web-component
 
-> :warning: This is a fork!
+> :warning: This is a fork !  
+>
+> Features in fork: passive boolean attribute for read-only editor  
+> and min-height for setting a minimum height as CSS prop to the editor element  
+> Additional variant \<faust-editor-basic\> without buttons for dynamic editor  
+> Aims to bring a lightweight variant, see usecase in [my other project](https://github.com/Simon-L/pasfa)
 
 This package provides two [web components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) for embedding interactive [Faust](https://faust.grame.fr) snippets in web pages.
 
diff --git a/src/faust-editor-basic.ts b/src/faust-editor-basic.ts
new file mode 100644
index 0000000..d35f8b6
--- /dev/null
+++ b/src/faust-editor-basic.ts
@@ -0,0 +1,172 @@
+import { icon } from "@fortawesome/fontawesome-svg-core"
+import faustCSS from "@shren/faust-ui/dist/esm/index.css?inline"
+import { createEditor, setError, clearError } from "./editor"
+import faustSvg from "./faustText.svg"
+
+function editorTemplate(passive: boolean = false, minHeight: string = "") {
+    const hidden = passive ? "hidden" : ""
+    const editorMinHeight = minHeight != "" ? `min-height: ${minHeight};` : ""
+    const template = document.createElement("template")
+    template.innerHTML = `
+    <div id="root">
+        <div id="controls">
+            <a title="Open in Faust IDE" id="ide" href="https://faustide.grame.fr/" class="button" target="_blank">${icon({ prefix: "fas", iconName: "up-right-from-square" }).html[0]}</a>
+            <button title="Copy" class="button" id="copy">${icon({ prefix: "fas", iconName: "copy" }).html[0]}</button>
+            <a title="Faust website" id="faust" href="https://faust.grame.fr/" target="_blank"><img src="${faustSvg}" height="15px" /></a>
+        </div>
+        <div id="content">
+            <div id="editor"></div>
+        </div>
+    </div>
+    <style>
+        #root {
+            overflow:hidden;
+            border: 1px solid black;
+            border-radius: 5px;
+            box-sizing: border-box;
+        }
+
+        *, *:before, *:after {
+            box-sizing: inherit; 
+        }
+        
+        #controls {
+            background-color: #384d64;
+            border-bottom: 1px solid black;
+            display: flex;
+        }
+
+        #faust {
+            margin-left: auto;
+            margin-right: 10px;
+            display: flex;
+            align-items: center;
+        }
+
+        #content {
+            display: flex;
+        }
+
+        #editor {
+            flex-grow: 1;
+            overflow-y: auto;
+        }
+
+        #editor .cm-editor {
+            height: 100%;
+            ${minHeight != "" ? `min-height: ${minHeight};` : ""}
+        }
+
+        .cm-diagnostic {
+            font-family: monospace;
+        }
+
+        .cm-diagnostic-error {
+            background-color: #fdf2f5 !important;
+            color: #a4000f !important;
+            border-color: #a4000f !important;
+        }
+
+        a.button {
+            appearance: button;
+        }
+
+        .button {
+            background-color: #384d64;
+            border: 0;
+            padding: 5px;
+            width: 25px;
+            height: 25px;
+            color: #fff;
+        }
+
+        .button:hover {
+            background-color: #4b71a1;
+        }
+
+        .button:active {
+            background-color: #373736;
+        }
+
+        .button:disabled {
+            opacity: 0.65;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+
+        #controls > .button > svg {
+            width: 15px;
+            height: 15px;
+            vertical-align: top;
+        }
+
+        ${faustCSS}
+    </style>
+    `
+    return template
+}
+
+export default class FaustEditorBasic extends HTMLElement {
+    constructor() {
+        super()
+    }
+    
+    passive = false
+    minHeight = null
+    editor = null
+    
+    getCodeString() {
+        return this.editor.state.doc.toString()
+    }
+    
+    setCode(code) {
+        this.editor.dispatch({
+          changes: {from: 0, to: this.editor.state.doc.length, insert: code}
+        })
+    }
+
+    connectedCallback() {
+        const code = this.innerHTML.replace("<!--", "").replace("-->", "").trim()
+        console.log("connectedCallback: Got %s for min-height", this.minHeight);
+        this.attachShadow({ mode: "open" }).appendChild(editorTemplate(this.passive, this.minHeight).content.cloneNode(true))
+
+        const ideLink = this.shadowRoot!.querySelector("#ide") as HTMLAnchorElement
+        ideLink.onfocus = () => {
+            // Open current contents of editor in IDE
+            const urlParams = new URLSearchParams()
+            urlParams.set("inline", btoa(editor.state.doc.toString()).replace("+", "-").replace("/", "_"))
+            ideLink.href = `https://faustide.grame.fr/?${urlParams.toString()}`
+        }
+
+        const editorEl = this.shadowRoot!.querySelector("#editor") as HTMLDivElement
+        const editor = createEditor(editorEl, code, !this.passive)
+
+        const copyButton = this.shadowRoot!.querySelector("#copy") as HTMLButtonElement
+        
+        copyButton.onclick = () => {
+            if (navigator.clipboard) {
+                navigator.clipboard.writeText(editor.state.doc.toString())
+            } else {
+                console.log("Unable to use clipboard")
+            }
+        }
+        
+        this.editor = editor
+    }
+    
+    attributeChangedCallback(name, oldValue, newValue) {
+      if ((name ==  "passive") && (newValue != null)) {
+          this.passive = true
+      }
+      if ((name ==  "min-height") && (newValue != "")) {
+          this.minHeight = newValue
+          console.log("Got %s for min-height", newValue);
+          
+      }
+    }
+    
+    static get observedAttributes() {
+      return ["passive", "min-height"];
+    }
+
+}
diff --git a/src/faust-editor.ts b/src/faust-editor.ts
index 91771fe..7c09470 100644
--- a/src/faust-editor.ts
+++ b/src/faust-editor.ts
@@ -8,8 +8,9 @@ import { createEditor, setError, clearError } from "./editor"
 import { Scope } from "./scope"
 import faustSvg from "./faustText.svg"
 
-function editorTemplate(passive: boolean = false) {
+function editorTemplate(passive: boolean = false, minHeight: string = "") {
     const hidden = passive ? "hidden" : ""
+    const editorMinHeight = minHeight != "" ? `min-height: ${minHeight};` : ""
     const template = document.createElement("template")
     template.innerHTML = `
     <div id="root">
@@ -49,6 +50,7 @@ function editorTemplate(passive: boolean = false) {
     </div>
     <style>
         #root {
+            overflow:hidden
             border: 1px solid black;
             border-radius: 5px;
             box-sizing: border-box;
@@ -97,6 +99,7 @@ function editorTemplate(passive: boolean = false) {
 
         #editor .cm-editor {
             height: 100%;
+            ${minHeight != "" ? `min-height: ${minHeight};` : ""}
         }
 
         .cm-diagnostic {
@@ -223,10 +226,16 @@ export default class FaustEditor extends HTMLElement {
     }
     
     passive = false
+    minHeight = null
+    editor = null
+    
+    getCodeString() {
+        return this.editor.state.doc.toString()
+    }
 
     connectedCallback() {
         const code = this.innerHTML.replace("<!--", "").replace("-->", "").trim()
-        this.attachShadow({ mode: "open" }).appendChild(editorTemplate(this.passive).content.cloneNode(true))
+        this.attachShadow({ mode: "open" }).appendChild(editorTemplate(this.passive, this.minHeight).content.cloneNode(true))
 
         const ideLink = this.shadowRoot!.querySelector("#ide") as HTMLAnchorElement
         ideLink.onfocus = () => {
@@ -499,16 +508,21 @@ export default class FaustEditor extends HTMLElement {
         if (this.passive) {
             sidebar.remove()
         }
+        
+        this.editor = editor
     }
     
     attributeChangedCallback(name, oldValue, newValue) {
       if ((name ==  "passive") && (newValue != null)) {
           this.passive = true
       }
+      if ((name ==  "min-height") && (newValue != "")) {
+          this.minHeight = newValue
+      }
     }
     
     static get observedAttributes() {
-      return ["passive"];
+      return ["passive", "min-height"];
     }
 
 }
diff --git a/src/main.ts b/src/main.ts
index 8659c72..df17401 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,7 @@
 import FaustEditor from "./faust-editor"
+import FaustEditorBasic from "./faust-editor-basic"
 import FaustWidget from "./faust-widget"
 
 customElements.define("faust-editor", FaustEditor)
+customElements.define("faust-editor-basic", FaustEditorBasic)
 customElements.define("faust-widget", FaustWidget)

From accb8bd3fe71b08f8e443b5ab02ff098824bbdeb Mon Sep 17 00:00:00 2001
From: Simon-L <lumis@xulepth.fr>
Date: Fri, 1 Dec 2023 15:06:44 +0100
Subject: [PATCH 03/13] Fix typo in CSS

---
 src/faust-editor.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/faust-editor.ts b/src/faust-editor.ts
index 7c09470..4dfb59e 100644
--- a/src/faust-editor.ts
+++ b/src/faust-editor.ts
@@ -50,7 +50,7 @@ function editorTemplate(passive: boolean = false, minHeight: string = "") {
     </div>
     <style>
         #root {
-            overflow:hidden
+            overflow:hidden;
             border: 1px solid black;
             border-radius: 5px;
             box-sizing: border-box;

From a76b3068b125eec84e0e740e96146630ed64310f Mon Sep 17 00:00:00 2001
From: Simon-L <lumis@xulepth.fr>
Date: Fri, 1 Dec 2023 15:18:48 +0100
Subject: [PATCH 04/13] Use minHeight attribute when starting dsp

---
 src/faust-editor.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/faust-editor.ts b/src/faust-editor.ts
index 4dfb59e..e48e5eb 100644
--- a/src/faust-editor.ts
+++ b/src/faust-editor.ts
@@ -370,8 +370,12 @@ export default class FaustEditor extends HTMLElement {
             // Create SVG block diagram
             setSVG(svgDiagrams.from("main", code, "")["process.svg"])
 
-            // Set editor size to fit UI size
-            editorEl.style.height = `${Math.max(125, faustUI.minHeight)}px`;
+            // Set editor size to fit UI size or use custom value in attribute
+            if (this.minHeight != null) {
+                editorEl.style.height = this.minHeight;
+            } else {
+                editorEl.style.height = `${Math.max(125, faustUI.minHeight)}px`;
+            }
             faustUIRoot.style.width = faustUI.minWidth * 1.25 + "px"
             faustUIRoot.style.height = faustUI.minHeight * 1.25 + "px"
         }

From 82ea78185906713945ac5d7f8eb0ce5d7685b1cd Mon Sep 17 00:00:00 2001
From: Simon-L <lumis@xulepth.fr>
Date: Mon, 4 Dec 2023 18:38:40 +0100
Subject: [PATCH 05/13] Rename attribute from passive to readonly. Update demo
 in index.html

---
 README.md                 |  9 +++++----
 index.html                | 34 +++++++++++++++++++++++++++++++---
 src/faust-editor-basic.ts | 17 +++++++----------
 src/faust-editor.ts       | 27 +++++++++++----------------
 4 files changed, 54 insertions(+), 33 deletions(-)

diff --git a/README.md b/README.md
index 3a28303..626580a 100644
--- a/README.md
+++ b/README.md
@@ -2,16 +2,17 @@
 
 > :warning: This is a fork !  
 >
-> Features in fork: passive boolean attribute for read-only editor  
-> and min-height for setting a minimum height as CSS prop to the editor element  
+> Features in fork: `readonly` boolean attribute for read-only editor  
+> and `min-height` for setting a minimum height as CSS prop to the editor element  
 > Additional variant \<faust-editor-basic\> without buttons for dynamic editor  
-> Aims to bring a lightweight variant, see usecase in [my other project](https://github.com/Simon-L/pasfa)
+> Aims to bring a lightweight variant, see [the demo](https://synthe.tiseur.fr/faust-web-component/#readonlyandbasic) or an usecase in [my other project](https://github.com/Simon-L/pasfa)
 
 This package provides two [web components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) for embedding interactive [Faust](https://faust.grame.fr) snippets in web pages.
 
 - `<faust-editor>` displays an editor (using [CodeMirror 6](https://codemirror.net/)) with executable, editable Faust code, along with some bells & whistles (controls, block diagram, plots) in a side pane.
 This component is ideal for demonstrating some code in Faust and allowing the reader to try it out and tweak it themselves without having to leave the page. (For more extensive work, it also includes a button to open the code in the Faust IDE.)
-    * `passive` attributes disables playback and makes editor read-only
+    * `readonly` : attribute disables playback and makes editor read-only.
+    * `min-height` : attribute to set the min-height CSS property, the value must be valid CSS value eg. "42px", "1.5em".
 
 - `<faust-widget>` just shows the controls and does not allow editing, so it serves simply as a way to embed interactive DSP.
 
diff --git a/index.html b/index.html
index a83487e..ababf2d 100644
--- a/index.html
+++ b/index.html
@@ -15,6 +15,7 @@
     </head>
     <body>
         <div id="content">
+            <a href="#readonlyandbasic">Readonly and basic editor examples</a>
             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
             <faust-editor>
 import("stdfaust.lib");
@@ -53,10 +54,11 @@
     dm.zita_light; // stereo reverb
                 -->
             </faust-editor>
-            <p>Excepteur sint occaecat cupidatat non proident, sunt meserunt mollit id est laborum.</p>
-            <faust-editor passive>
+            <a id="readonlyandbasic"></a>
+            <p>Read-only editor</p>
+            <faust-editor readonly>
                 <!--
-// This editor is "passive", it's read-only and doesn't offer playback
+// This editor is readonly
 import("stdfaust.lib");
 process = 
     dm.cubicnl_demo : // distortion 
@@ -66,6 +68,32 @@
     dm.zita_light; // stereo reverb
                 -->
             </faust-editor>
+            <p>Basic editor without playback</p>
+            <faust-editor-basic>
+                <!--
+// This editor is "basic", it doesn't offer playback
+import("stdfaust.lib");
+process = 
+    dm.cubicnl_demo : // distortion 
+    dm.wah4_demo <: // wah pedal
+    dm.phaser2_demo : // stereo phaser 
+    dm.compressor_demo : // stereo compressor
+    dm.zita_light; // stereo reverb
+                -->
+            </faust-editor-basic>
+            <p>Read-only basic editor without playback</p>
+            <faust-editor-basic readonly>
+                <!--
+// This editor is "basic", it doesn't offer playback
+import("stdfaust.lib");
+process = 
+    dm.cubicnl_demo : // distortion 
+    dm.wah4_demo <: // wah pedal
+    dm.phaser2_demo : // stereo phaser 
+    dm.compressor_demo : // stereo compressor
+    dm.zita_light; // stereo reverb
+                -->
+            </faust-editor-basic>
             <p>Minus, ducimus consequuntur? Corrupti animi aut magni nihil, dolor eos tenetur, autem deserunt et iure culpa, suscipit minus quia velit laudantium asperiores.</p>
             <faust-widget>
 <!--
diff --git a/src/faust-editor-basic.ts b/src/faust-editor-basic.ts
index d35f8b6..dce95af 100644
--- a/src/faust-editor-basic.ts
+++ b/src/faust-editor-basic.ts
@@ -3,8 +3,7 @@ import faustCSS from "@shren/faust-ui/dist/esm/index.css?inline"
 import { createEditor, setError, clearError } from "./editor"
 import faustSvg from "./faustText.svg"
 
-function editorTemplate(passive: boolean = false, minHeight: string = "") {
-    const hidden = passive ? "hidden" : ""
+function editorTemplate(readonly: boolean = false, minHeight: string = "") {
     const editorMinHeight = minHeight != "" ? `min-height: ${minHeight};` : ""
     const template = document.createElement("template")
     template.innerHTML = `
@@ -111,7 +110,7 @@ export default class FaustEditorBasic extends HTMLElement {
         super()
     }
     
-    passive = false
+    readonly = false
     minHeight = null
     editor = null
     
@@ -128,7 +127,7 @@ export default class FaustEditorBasic extends HTMLElement {
     connectedCallback() {
         const code = this.innerHTML.replace("<!--", "").replace("-->", "").trim()
         console.log("connectedCallback: Got %s for min-height", this.minHeight);
-        this.attachShadow({ mode: "open" }).appendChild(editorTemplate(this.passive, this.minHeight).content.cloneNode(true))
+        this.attachShadow({ mode: "open" }).appendChild(editorTemplate(this.readonly, this.minHeight).content.cloneNode(true))
 
         const ideLink = this.shadowRoot!.querySelector("#ide") as HTMLAnchorElement
         ideLink.onfocus = () => {
@@ -139,7 +138,7 @@ export default class FaustEditorBasic extends HTMLElement {
         }
 
         const editorEl = this.shadowRoot!.querySelector("#editor") as HTMLDivElement
-        const editor = createEditor(editorEl, code, !this.passive)
+        const editor = createEditor(editorEl, code, !this.readonly)
 
         const copyButton = this.shadowRoot!.querySelector("#copy") as HTMLButtonElement
         
@@ -155,18 +154,16 @@ export default class FaustEditorBasic extends HTMLElement {
     }
     
     attributeChangedCallback(name, oldValue, newValue) {
-      if ((name ==  "passive") && (newValue != null)) {
-          this.passive = true
+      if ((name ==  "readonly") && (newValue != null)) {
+          this.readonly = true
       }
       if ((name ==  "min-height") && (newValue != "")) {
           this.minHeight = newValue
-          console.log("Got %s for min-height", newValue);
-          
       }
     }
     
     static get observedAttributes() {
-      return ["passive", "min-height"];
+      return ["readonly", "min-height"];
     }
 
 }
diff --git a/src/faust-editor.ts b/src/faust-editor.ts
index e48e5eb..460f346 100644
--- a/src/faust-editor.ts
+++ b/src/faust-editor.ts
@@ -8,18 +8,17 @@ import { createEditor, setError, clearError } from "./editor"
 import { Scope } from "./scope"
 import faustSvg from "./faustText.svg"
 
-function editorTemplate(passive: boolean = false, minHeight: string = "") {
-    const hidden = passive ? "hidden" : ""
+function editorTemplate(readonly: boolean = false, minHeight: string = "") {
     const editorMinHeight = minHeight != "" ? `min-height: ${minHeight};` : ""
     const template = document.createElement("template")
     template.innerHTML = `
     <div id="root">
         <div id="controls">
-            <button title="Run" class="button" id="run" disabled ${hidden}>${icon({ prefix: "fas", iconName: "play" }).html[0]}</button>
-            <button title="Stop" class="button" id="stop" disabled ${hidden}>${icon({ prefix: "fas", iconName: "stop" }).html[0]}</button>
+            <button title="Run" class="button" id="run" disabled>${icon({ prefix: "fas", iconName: "play" }).html[0]}</button>
+            <button title="Stop" class="button" id="stop" disabled>${icon({ prefix: "fas", iconName: "stop" }).html[0]}</button>
             <a title="Open in Faust IDE" id="ide" href="https://faustide.grame.fr/" class="button" target="_blank">${icon({ prefix: "fas", iconName: "up-right-from-square" }).html[0]}</a>
             <button title="Copy" class="button" id="copy">${icon({ prefix: "fas", iconName: "copy" }).html[0]}</button>
-            <select id="audio-input" class="dropdown" disabled ${hidden}>
+            <select id="audio-input" class="dropdown" disabled>
                 <option>Audio input</option>
             </select>
             <!-- TODO: MIDI input
@@ -225,7 +224,7 @@ export default class FaustEditor extends HTMLElement {
         super()
     }
     
-    passive = false
+    readonly = false
     minHeight = null
     editor = null
     
@@ -235,7 +234,7 @@ export default class FaustEditor extends HTMLElement {
 
     connectedCallback() {
         const code = this.innerHTML.replace("<!--", "").replace("-->", "").trim()
-        this.attachShadow({ mode: "open" }).appendChild(editorTemplate(this.passive, this.minHeight).content.cloneNode(true))
+        this.attachShadow({ mode: "open" }).appendChild(editorTemplate(this.readonly, this.minHeight).content.cloneNode(true))
 
         const ideLink = this.shadowRoot!.querySelector("#ide") as HTMLAnchorElement
         ideLink.onfocus = () => {
@@ -246,7 +245,7 @@ export default class FaustEditor extends HTMLElement {
         }
 
         const editorEl = this.shadowRoot!.querySelector("#editor") as HTMLDivElement
-        const editor = createEditor(editorEl, code, !this.passive)
+        const editor = createEditor(editorEl, code, !this.readonly)
 
         const runButton = this.shadowRoot!.querySelector("#run") as HTMLButtonElement
         const stopButton = this.shadowRoot!.querySelector("#stop") as HTMLButtonElement
@@ -261,7 +260,7 @@ export default class FaustEditor extends HTMLElement {
         const split = Split([editorEl, sidebar], {
             sizes: [100, 0],
             minSize: [0, 20],
-            gutterSize: this.passive ? 0 : 7,
+            gutterSize: 7,
             snapOffset: 150,
             onDragEnd: () => { scope?.onResize(); spectrum?.onResize() },
         })
@@ -509,16 +508,12 @@ export default class FaustEditor extends HTMLElement {
 
         audioInputSelector.onchange = connectInput
         
-        if (this.passive) {
-            sidebar.remove()
-        }
-        
         this.editor = editor
     }
     
     attributeChangedCallback(name, oldValue, newValue) {
-      if ((name ==  "passive") && (newValue != null)) {
-          this.passive = true
+      if ((name ==  "readonly") && (newValue != null)) {
+          this.readonly = true
       }
       if ((name ==  "min-height") && (newValue != "")) {
           this.minHeight = newValue
@@ -526,7 +521,7 @@ export default class FaustEditor extends HTMLElement {
     }
     
     static get observedAttributes() {
-      return ["passive", "min-height"];
+      return ["readonly", "min-height"];
     }
 
 }

From 35198fd250a0ea7ba1bca06f31a16434cd948de5 Mon Sep 17 00:00:00 2001
From: Simon-L <lumis@xulepth.fr>
Date: Tue, 5 Dec 2023 00:48:46 +0100
Subject: [PATCH 06/13] Handle environment variable FAUST_WEB_BASIC to build
 only basic variant as faust-web-component-basic.js, hugely reducing size and
 load time

---
 src/main-basic.ts | 11 +++++++++++
 vite.config.js    |  7 +++++--
 2 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 src/main-basic.ts

diff --git a/src/main-basic.ts b/src/main-basic.ts
new file mode 100644
index 0000000..7af90f9
--- /dev/null
+++ b/src/main-basic.ts
@@ -0,0 +1,11 @@
+import { library } from "@fortawesome/fontawesome-svg-core"
+import { faPlay, faStop, faUpRightFromSquare, faSquareCaretLeft, faAnglesLeft, faAnglesRight, faSliders, faDiagramProject, faWaveSquare, faChartLine, faPowerOff, faCopy } from "@fortawesome/free-solid-svg-icons"
+
+for (const icon of [faPlay, faStop, faUpRightFromSquare, faSquareCaretLeft, faAnglesLeft, faAnglesRight, faSliders, faDiagramProject, faWaveSquare, faChartLine, faPowerOff, faCopy]) {
+    library.add(icon)
+}
+
+import FaustEditorBasic from "./faust-editor-basic"
+
+customElements.define("faust-editor-basic", FaustEditorBasic)
+
diff --git a/vite.config.js b/vite.config.js
index 6e8fa5c..d5363e1 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -4,10 +4,13 @@ import { defineConfig } from 'vite'
 export default defineConfig({
     build: {
         lib: {
-            entry: resolve(__dirname, "src/main.ts"),
+            entry: resolve(__dirname, process.env.FAUST_WEB_BASIC ? "src/main-basic.ts" : "src/main.ts"),
             name: "faust_web_component",
             formats: ["iife"],
-            fileName: () => "faust-web-component.js",
+            fileName: () => {
+                if (process.env.FAUST_WEB_BASIC) { return "faust-web-component-basic.js" }
+                else { return "faust-web-component.js" }
+            },
         },
         sourcemap: true,
     },

From 006b81774eafbc38c31d4a320e1e4381eac896fc Mon Sep 17 00:00:00 2001
From: Simon-L <lumis@xulepth.fr>
Date: Tue, 5 Dec 2023 00:53:08 +0100
Subject: [PATCH 07/13] Update README.md

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 626580a..90caef2 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,7 @@
 > and `min-height` for setting a minimum height as CSS prop to the editor element  
 > Additional variant \<faust-editor-basic\> without buttons for dynamic editor  
 > Aims to bring a lightweight variant, see [the demo](https://synthe.tiseur.fr/faust-web-component/#readonlyandbasic) or an usecase in [my other project](https://github.com/Simon-L/pasfa)
+> Build the basic variant only using: `FAUST_WEB_BASIC=true npm run build`. Much smaller size but obviously doesn't allow compiling DSP.
 
 This package provides two [web components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) for embedding interactive [Faust](https://faust.grame.fr) snippets in web pages.
 

From 681e15e5ab0222e4940850293c1b2b076613a744 Mon Sep 17 00:00:00 2001
From: Simon-L <lumis@xulepth.fr>
Date: Tue, 5 Dec 2023 02:52:38 +0100
Subject: [PATCH 08/13] Nit

---
 README.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 90caef2..5b3fe00 100644
--- a/README.md
+++ b/README.md
@@ -5,8 +5,9 @@
 > Features in fork: `readonly` boolean attribute for read-only editor  
 > and `min-height` for setting a minimum height as CSS prop to the editor element  
 > Additional variant \<faust-editor-basic\> without buttons for dynamic editor  
-> Aims to bring a lightweight variant, see [the demo](https://synthe.tiseur.fr/faust-web-component/#readonlyandbasic) or an usecase in [my other project](https://github.com/Simon-L/pasfa)
-> Build the basic variant only using: `FAUST_WEB_BASIC=true npm run build`. Much smaller size but obviously doesn't allow compiling DSP.
+> Aims to bring a lightweight variant, see [the demo](https://synthe.tiseur.fr/faust-web-component/#readonlyandbasic)  
+> or an usecase in [my other project](https://github.com/Simon-L/pasfa)  
+> Build the basic variant only using: `FAUST_WEB_BASIC=true npm run build`. Much smaller size but obviously doesn't allow compiling DSP.  
 
 This package provides two [web components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) for embedding interactive [Faust](https://faust.grame.fr) snippets in web pages.
 

From 0f4b74f58c2135f16552aeb841b37aff8784fae4 Mon Sep 17 00:00:00 2001
From: Simon-L <lumis@xulepth.fr>
Date: Wed, 6 Dec 2023 03:23:48 +0100
Subject: [PATCH 09/13] Always build twice to generate both variants, this is a
 workaround See https://github.com/rollup/rollup/issues/2756 and
 https://github.com/vitejs/vite/discussions/1736

---
 package.json   |  3 ++-
 vite.config.js | 27 +++++++++++++++------------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 635c055..8c95f58 100644
--- a/package.json
+++ b/package.json
@@ -10,12 +10,13 @@
         "tsconfig.json",
         "vite.config.js",
         "dist/faust-web-component.js",
+        "dist/faust-web-component-basic.js",
         "dist/02-XYLO1.mp3"
     ],
     "type": "module",
     "scripts": {
         "dev": "vite",
-        "build": "vite build",
+        "build": "vite build && vite build --mode basic",
         "preview": "vite preview"
     },
     "repository": {
diff --git a/vite.config.js b/vite.config.js
index d5363e1..4bb8cd5 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,17 +1,20 @@
 import { resolve } from 'path'
 import { defineConfig } from 'vite'
 
-export default defineConfig({
-    build: {
-        lib: {
-            entry: resolve(__dirname, process.env.FAUST_WEB_BASIC ? "src/main-basic.ts" : "src/main.ts"),
-            name: "faust_web_component",
-            formats: ["iife"],
-            fileName: () => {
-                if (process.env.FAUST_WEB_BASIC) { return "faust-web-component-basic.js" }
-                else { return "faust-web-component.js" }
+export default defineConfig(({ mode }) => {
+    return {
+        build: {
+            lib: {
+                entry: resolve(__dirname, mode == "basic" ? "src/main-basic.ts" : "src/main.ts"),
+                name: "faust_web_component",
+                formats: ["iife"],
+                fileName: () => {
+                    if (mode == "basic") { return "faust-web-component-basic.js" }
+                    else { return "faust-web-component.js" }
+                },
             },
-        },
-        sourcemap: true,
-    },
+            sourcemap: true,
+            emptyOutDir: false,
+        }
+    }
 })

From fa2adeb67a9f58dd8bb2b185c82bb59051f2b6df Mon Sep 17 00:00:00 2001
From: Simon-L <lumis@xulepth.fr>
Date: Wed, 6 Dec 2023 03:51:24 +0100
Subject: [PATCH 10/13] Update readme

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 5b3fe00..2f216eb 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@
 > Additional variant \<faust-editor-basic\> without buttons for dynamic editor  
 > Aims to bring a lightweight variant, see [the demo](https://synthe.tiseur.fr/faust-web-component/#readonlyandbasic)  
 > or an usecase in [my other project](https://github.com/Simon-L/pasfa)  
-> Build the basic variant only using: `FAUST_WEB_BASIC=true npm run build`. Much smaller size but obviously doesn't allow compiling DSP.  
+> `dist/faust-web-component-basic.js` contains only the basic variant, it's much smaller in size but obviously doesn't allow compiling DSP.  
 
 This package provides two [web components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) for embedding interactive [Faust](https://faust.grame.fr) snippets in web pages.
 

From 26f67532b195f2058c71180f08b445042ebdb669 Mon Sep 17 00:00:00 2001
From: Simon-L <lumis@xulepth.fr>
Date: Fri, 22 Dec 2023 13:57:46 +0100
Subject: [PATCH 11/13] Nit: remove unneeded logging, unused args and fix
 comparison operators

---
 src/faust-editor-basic.ts | 9 ++++-----
 src/faust-editor.ts       | 4 ++--
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/faust-editor-basic.ts b/src/faust-editor-basic.ts
index dce95af..644d034 100644
--- a/src/faust-editor-basic.ts
+++ b/src/faust-editor-basic.ts
@@ -3,7 +3,7 @@ import faustCSS from "@shren/faust-ui/dist/esm/index.css?inline"
 import { createEditor, setError, clearError } from "./editor"
 import faustSvg from "./faustText.svg"
 
-function editorTemplate(readonly: boolean = false, minHeight: string = "") {
+function editorTemplate(minHeight: string = "") {
     const editorMinHeight = minHeight != "" ? `min-height: ${minHeight};` : ""
     const template = document.createElement("template")
     template.innerHTML = `
@@ -126,8 +126,7 @@ export default class FaustEditorBasic extends HTMLElement {
 
     connectedCallback() {
         const code = this.innerHTML.replace("<!--", "").replace("-->", "").trim()
-        console.log("connectedCallback: Got %s for min-height", this.minHeight);
-        this.attachShadow({ mode: "open" }).appendChild(editorTemplate(this.readonly, this.minHeight).content.cloneNode(true))
+        this.attachShadow({ mode: "open" }).appendChild(editorTemplate(this.minHeight).content.cloneNode(true))
 
         const ideLink = this.shadowRoot!.querySelector("#ide") as HTMLAnchorElement
         ideLink.onfocus = () => {
@@ -154,10 +153,10 @@ export default class FaustEditorBasic extends HTMLElement {
     }
     
     attributeChangedCallback(name, oldValue, newValue) {
-      if ((name ==  "readonly") && (newValue != null)) {
+      if ((name ===  "readonly") && (newValue !== null)) {
           this.readonly = true
       }
-      if ((name ==  "min-height") && (newValue != "")) {
+      if ((name ===  "min-height") && (newValue !== "")) {
           this.minHeight = newValue
       }
     }
diff --git a/src/faust-editor.ts b/src/faust-editor.ts
index 460f346..dbfc50f 100644
--- a/src/faust-editor.ts
+++ b/src/faust-editor.ts
@@ -512,10 +512,10 @@ export default class FaustEditor extends HTMLElement {
     }
     
     attributeChangedCallback(name, oldValue, newValue) {
-      if ((name ==  "readonly") && (newValue != null)) {
+      if ((name ===  "readonly") && (newValue !== null)) {
           this.readonly = true
       }
-      if ((name ==  "min-height") && (newValue != "")) {
+      if ((name ===  "min-height") && (newValue !== "")) {
           this.minHeight = newValue
       }
     }

From 476466aa7465805fef7b740adf2cae0b477c878e Mon Sep 17 00:00:00 2001
From: Simon-L <lumis@xulepth.fr>
Date: Fri, 22 Dec 2023 14:20:54 +0100
Subject: [PATCH 12/13] Use CM readOnly facet instead of editable. Check
 clipboard at template generation

---
 src/editor.ts             |  2 +-
 src/faust-editor-basic.ts | 13 ++++++++-----
 src/faust-editor.ts       | 17 ++++++++++-------
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/editor.ts b/src/editor.ts
index 23e654f..2bcc6c6 100644
--- a/src/editor.ts
+++ b/src/editor.ts
@@ -63,7 +63,7 @@ export function createEditor(parent: HTMLElement, doc: string, editable: boolean
                 ...lintKeymap
             ]),
             faustLanguage,
-            EditorView.editable.of(editable)
+            EditorState.readOnly.of(!editable)
         ],
     })
 }
diff --git a/src/faust-editor-basic.ts b/src/faust-editor-basic.ts
index 644d034..02faac7 100644
--- a/src/faust-editor-basic.ts
+++ b/src/faust-editor-basic.ts
@@ -6,11 +6,16 @@ import faustSvg from "./faustText.svg"
 function editorTemplate(minHeight: string = "") {
     const editorMinHeight = minHeight != "" ? `min-height: ${minHeight};` : ""
     const template = document.createElement("template")
+    let copyButton = `<button title="Copy" class="button" id="copy">${icon({ prefix: "fas", iconName: "copy" }).html[0]}</button>`
+    if (!navigator.clipboard) {
+        console.log("Unable to use clipboard")
+        copyButton = ""
+    }
     template.innerHTML = `
     <div id="root">
         <div id="controls">
             <a title="Open in Faust IDE" id="ide" href="https://faustide.grame.fr/" class="button" target="_blank">${icon({ prefix: "fas", iconName: "up-right-from-square" }).html[0]}</a>
-            <button title="Copy" class="button" id="copy">${icon({ prefix: "fas", iconName: "copy" }).html[0]}</button>
+            ${copyButton}
             <a title="Faust website" id="faust" href="https://faust.grame.fr/" target="_blank"><img src="${faustSvg}" height="15px" /></a>
         </div>
         <div id="content">
@@ -141,11 +146,9 @@ export default class FaustEditorBasic extends HTMLElement {
 
         const copyButton = this.shadowRoot!.querySelector("#copy") as HTMLButtonElement
         
-        copyButton.onclick = () => {
-            if (navigator.clipboard) {
+        if (copyButton !== null) {
+            copyButton.onclick = () => {
                 navigator.clipboard.writeText(editor.state.doc.toString())
-            } else {
-                console.log("Unable to use clipboard")
             }
         }
         
diff --git a/src/faust-editor.ts b/src/faust-editor.ts
index dbfc50f..1466571 100644
--- a/src/faust-editor.ts
+++ b/src/faust-editor.ts
@@ -8,16 +8,21 @@ import { createEditor, setError, clearError } from "./editor"
 import { Scope } from "./scope"
 import faustSvg from "./faustText.svg"
 
-function editorTemplate(readonly: boolean = false, minHeight: string = "") {
+function editorTemplate(minHeight: string = "") {
     const editorMinHeight = minHeight != "" ? `min-height: ${minHeight};` : ""
     const template = document.createElement("template")
+    let copyButton = `<button title="Copy" class="button" id="copy">${icon({ prefix: "fas", iconName: "copy" }).html[0]}</button>`
+    if (!navigator.clipboard) {
+        console.log("Unable to use clipboard")
+        copyButton = ""
+    }
     template.innerHTML = `
     <div id="root">
         <div id="controls">
             <button title="Run" class="button" id="run" disabled>${icon({ prefix: "fas", iconName: "play" }).html[0]}</button>
             <button title="Stop" class="button" id="stop" disabled>${icon({ prefix: "fas", iconName: "stop" }).html[0]}</button>
             <a title="Open in Faust IDE" id="ide" href="https://faustide.grame.fr/" class="button" target="_blank">${icon({ prefix: "fas", iconName: "up-right-from-square" }).html[0]}</a>
-            <button title="Copy" class="button" id="copy">${icon({ prefix: "fas", iconName: "copy" }).html[0]}</button>
+            ${copyButton}
             <select id="audio-input" class="dropdown" disabled>
                 <option>Audio input</option>
             </select>
@@ -234,7 +239,7 @@ export default class FaustEditor extends HTMLElement {
 
     connectedCallback() {
         const code = this.innerHTML.replace("<!--", "").replace("-->", "").trim()
-        this.attachShadow({ mode: "open" }).appendChild(editorTemplate(this.readonly, this.minHeight).content.cloneNode(true))
+        this.attachShadow({ mode: "open" }).appendChild(editorTemplate(this.minHeight).content.cloneNode(true))
 
         const ideLink = this.shadowRoot!.querySelector("#ide") as HTMLAnchorElement
         ideLink.onfocus = () => {
@@ -435,11 +440,9 @@ export default class FaustEditor extends HTMLElement {
             tabButton.onclick = () => openTab(i)
         }
         
-        copyButton.onclick = () => {
-            if (navigator.clipboard) {
+        if (copyButton !== null) {
+            copyButton.onclick = () => {
                 navigator.clipboard.writeText(editor.state.doc.toString())
-            } else {
-                console.log("Unable to use clipboard")
             }
         }
         

From d98d7d3e65fb8ef0fdaf11d3ea271850f9cea2fd Mon Sep 17 00:00:00 2001
From: Simon-L <lumis@xulepth.fr>
Date: Fri, 22 Dec 2023 14:26:25 +0100
Subject: [PATCH 13/13] Nit: normalize readonly naming

---
 src/editor.ts             | 4 ++--
 src/faust-editor-basic.ts | 2 +-
 src/faust-editor.ts       | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/editor.ts b/src/editor.ts
index 2bcc6c6..cc00c10 100644
--- a/src/editor.ts
+++ b/src/editor.ts
@@ -32,7 +32,7 @@ const faustLanguage = StreamLanguage.define(clike({
     }
 }))
 
-export function createEditor(parent: HTMLElement, doc: string, editable: boolean = true) {
+export function createEditor(parent: HTMLElement, doc: string, readonly: boolean = false) {
     return new EditorView({
         parent,
         doc,
@@ -63,7 +63,7 @@ export function createEditor(parent: HTMLElement, doc: string, editable: boolean
                 ...lintKeymap
             ]),
             faustLanguage,
-            EditorState.readOnly.of(!editable)
+            EditorState.readOnly.of(readonly)
         ],
     })
 }
diff --git a/src/faust-editor-basic.ts b/src/faust-editor-basic.ts
index 02faac7..5823db9 100644
--- a/src/faust-editor-basic.ts
+++ b/src/faust-editor-basic.ts
@@ -142,7 +142,7 @@ export default class FaustEditorBasic extends HTMLElement {
         }
 
         const editorEl = this.shadowRoot!.querySelector("#editor") as HTMLDivElement
-        const editor = createEditor(editorEl, code, !this.readonly)
+        const editor = createEditor(editorEl, code, this.readonly)
 
         const copyButton = this.shadowRoot!.querySelector("#copy") as HTMLButtonElement
         
diff --git a/src/faust-editor.ts b/src/faust-editor.ts
index 1466571..4a4453f 100644
--- a/src/faust-editor.ts
+++ b/src/faust-editor.ts
@@ -250,7 +250,7 @@ export default class FaustEditor extends HTMLElement {
         }
 
         const editorEl = this.shadowRoot!.querySelector("#editor") as HTMLDivElement
-        const editor = createEditor(editorEl, code, !this.readonly)
+        const editor = createEditor(editorEl, code, this.readonly)
 
         const runButton = this.shadowRoot!.querySelector("#run") as HTMLButtonElement
         const stopButton = this.shadowRoot!.querySelector("#stop") as HTMLButtonElement