Add Toolbar for Interactive Context (#138)

* Add new toolbar & icons

* Register onClick event listeners

* Re-organize the style

* Add release note

* Bump version

_extensions/webr/_extension.yml

@@ -1,7 +1,7 @@
 name: webr
 title: Embedded webr code cells
 author: James Joseph Balamuta
-version: 0.4.0-dev.6
+version: 0.4.0-dev.7
 quarto-required: ">=1.2.198"
 contributes:
   filters:

_extensions/webr/qwebr-cell-elements.js

@@ -47,13 +47,50 @@ globalThis.qwebrCreateInteractiveElement = function (qwebrCounter) {
   mainDiv.id = 'qwebr-interactive-area-' + qwebrCounter;
   mainDiv.className = 'qwebr-interactive-area';
 
-  // Create button element
-  var button = document.createElement('button');
-  button.className = 'btn btn-default qwebr-button-run';
-  button.disabled = true;
-  button.type = 'button';
-  button.id = 'qwebr-button-run-' + qwebrCounter;
-  button.textContent = '🟡 Loading webR...';
+  // Create toolbar div
+  var toolbarDiv = document.createElement('div');
+  toolbarDiv.className = 'qwebr-editor-toolbar';
+  toolbarDiv.id = 'qwebr-editor-toolbar-' + qwebrCounter;
+
+  // Create a div to hold the left buttons
+  var leftButtonsDiv = document.createElement('div');
+  leftButtonsDiv.className = 'qwebr-editor-toolbar-left-buttons';
+
+  // Create a div to hold the right buttons
+  var rightButtonsDiv = document.createElement('div');
+  rightButtonsDiv.className = 'qwebr-editor-toolbar-right-buttons';
+
+  // Create Run Code button
+  var runCodeButton = document.createElement('button');
+  runCodeButton.className = 'btn btn-default qwebr-button qwebr-button-run';
+  runCodeButton.disabled = true;
+  runCodeButton.type = 'button';
+  runCodeButton.id = 'qwebr-button-run-' + qwebrCounter;
+  runCodeButton.textContent = '🟡 Loading webR...';
+  runCodeButton.title = `Run code (Shift + Enter)`;
+
+  // Append buttons to the leftButtonsDiv
+  leftButtonsDiv.appendChild(runCodeButton);
+
+  // Create Reset button
+  var resetButton = document.createElement('button');
+  resetButton.className = 'btn btn-light btn-xs qwebr-button qwebr-button-reset';
+  resetButton.type = 'button';
+  resetButton.id = 'qwebr-button-reset-' + qwebrCounter;
+  resetButton.title = 'Start over';
+  resetButton.innerHTML = '<i class="fa-solid fa-arrows-rotate"></i>';
+
+  // Create Copy button
+  var copyButton = document.createElement('button');
+  copyButton.className = 'btn btn-light btn-xs qwebr-button qwebr-button-copy';
+  copyButton.type = 'button';
+  copyButton.id = 'qwebr-button-copy-' + qwebrCounter;
+  copyButton.title = 'Copy code';
+  copyButton.innerHTML = '<i class="fa-regular fa-copy"></i>';
+
+  // Append buttons to the rightButtonsDiv
+  rightButtonsDiv.appendChild(resetButton);
+  rightButtonsDiv.appendChild(copyButton);
 
   // Create console area div
   var consoleAreaDiv = document.createElement('div');
@@ -81,8 +118,12 @@ globalThis.qwebrCreateInteractiveElement = function (qwebrCounter) {
   outputGraphAreaDiv.id = 'qwebr-output-graph-area-' + qwebrCounter;
   outputGraphAreaDiv.className = 'qwebr-output-graph-area';
 
+  // Append buttons to the toolbar
+  toolbarDiv.appendChild(leftButtonsDiv);
+  toolbarDiv.appendChild(rightButtonsDiv);
+
   // Append all elements to the main div
-  mainDiv.appendChild(button);
+  mainDiv.appendChild(toolbarDiv);
   consoleAreaDiv.appendChild(editorDiv);
   consoleAreaDiv.appendChild(outputCodeAreaDiv);
   mainDiv.appendChild(consoleAreaDiv);

_extensions/webr/qwebr-monaco-editor-element.js

@@ -9,6 +9,8 @@ globalThis.qwebrCreateMonacoEditorInstance = function (cellData) {
 
   // Retrieve the previously created document elements
   let runButton = document.getElementById(`qwebr-button-run-${qwebrCounter}`);
+  let resetButton = document.getElementById(`qwebr-button-reset-${qwebrCounter}`);
+  let copyButton = document.getElementById(`qwebr-button-copy-${qwebrCounter}`);
   let editorDiv = document.getElementById(`qwebr-editor-${qwebrCounter}`);
 
   // Load the Monaco Editor and create an instance
@@ -141,4 +143,21 @@ globalThis.qwebrCreateMonacoEditorInstance = function (cellData) {
     qwebrExecuteCode(editor.getValue(), editor.__qwebrCounter, EvalTypes.Interactive);
   };
 
+  // Add a click event listener to the reset button
+  copyButton.onclick = function () {
+    // Ensure the editor is in focus
+    editor.focus();
+
+    // Retrieve data
+    const data = editor.getValue();
+
+    // Set the clipboard contents.
+    navigator.clipboard.writeText(data || "");
+  };
+
+  // Add a click event listener to the copy button
+  resetButton.onclick = function () {
+    editor.setValue(editor.__qwebrinitialCode);
+  };
+
 }

_extensions/webr/qwebr-styling.css

@@ -2,6 +2,12 @@
   background-color: unset !important;
 }
 
+.qwebr-editor-toolbar {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
 .qwebr-non-interactive-loading-container.qwebr-cell-needs-evaluation, .qwebr-non-interactive-loading-container.qwebr-cell-evaluated {
   justify-content: center;
   display: flex;
@@ -36,42 +42,47 @@
   border: 1px solid #EEEEEE;
 }
 
-.qwebr-button-run {
+.qwebr-editor-toolbar {
+  background-color: #EEEEEE;
+  padding: 0.2rem 0.5rem;
+}
+
+.qwebr-button {
   background-color: #EEEEEE;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0; /* Extra styling for consistency */
   display: inline-block;
   font-weight: 400;
-  line-height: 1.5;
-  color: #000;
-  text-align: center;
+  line-height: 1;
   text-decoration: none;
-  -webkit-text-decoration: none;
-  -moz-text-decoration: none;
-  -ms-text-decoration: none;
-  -o-text-decoration: none;
-  /* vertical-align: middle; */ /* Prevents a space from appearing between the code cell and button */
-  -webkit-user-select: none;
+  text-align: center;
+  color: #000;
   border-color: #dee2e6;
   border: 1px solid rgba(0,0,0,0);
   padding: 0.375rem 0.75rem;
-  font-size: 1rem;
-  border-top-right-radius: 0.25rem;
-  border-top-left-radius: 0.25rem;
+  font-size: .9rem;
+  border-radius: 0.25rem;
   transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
 }
 
-.qwebr-button-run:hover {
+.qwebr-button:hover {
   color: #000;
-  background-color: #e3e6ea;
-  border-color: #e1e5e9;
+  background-color: #d9dce0;
+  border-color: #c8ccd0;
 }
 
-.qwebr-button-run:disabled,.qwebr-button-run.disabled,fieldset:disabled .qwebr-button-run {
+.qwebr-button:disabled,.qwebr-button.disabled,fieldset:disabled .qwebr-button {
   pointer-events: none;
   opacity: .65
 }
 
+.qwebr-button-reset {
+  color: #696969; /*#4682b4;*/
+}
+
+.qwebr-button-copy {
+  color: #696969;
+}
+
+
 /* Custom styling for RevealJS Presentations*/
 
 /* Reset the style of the interactive area */

docs/qwebr-release-notes.qmd

@@ -19,6 +19,7 @@ format:
 - Optimized the underlying code handling insertion and execution of R code.  ([#118](https://github.com/coatless/quarto-webr/pull/118))
 - Implemented a custom JSON format for code cell data and option sharing between Quarto and webR. ([#120](https://github.com/coatless/quarto-webr/pull/120))
 - Redesigned non-interactive cells to provide improved reliability and visual cues. ([#120](https://github.com/coatless/quarto-webr/pull/120))
+- Interactive cells now have a toolbar above them that provides three actions: Run Code, Start Over, and Copy. ([#91](https://github.com/coatless/quarto-webr/issues/91))
 - Added `repos` document meta option key to specify custom package repositories containing compiled R WASM Packages not found in the main [webR repository](https://repo.r-wasm.org/) ([#124](https://github.com/coatless/quarto-webr/issues/124), [#132](https://github.com/coatless/quarto-webr/pull/132)).
 
 ## Changes