From 4c262070e310b01322d0b8b47e351dd379381a65 Mon Sep 17 00:00:00 2001
From: John Nesky <nesky@google.com>
Date: Fri, 31 Jan 2025 18:09:29 -0800
Subject: [PATCH] feat: Added button to Advanced Playground to import state.

---
 plugins/dev-tools/src/playground/index.js | 33 +++++++++++++++++++++--
 plugins/dev-tools/src/playground/ui.js    | 13 ++++++++-
 2 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/plugins/dev-tools/src/playground/index.js b/plugins/dev-tools/src/playground/index.js
index c0f8001ee4..70a9c9c8ef 100644
--- a/plugins/dev-tools/src/playground/index.js
+++ b/plugins/dev-tools/src/playground/index.js
@@ -24,7 +24,12 @@ import {id} from './id';
 import {addCodeEditor} from './monaco';
 import {addGUIControls} from './options';
 import {LocalStorageState} from './state';
-import {renderCheckbox, renderCodeTab, renderPlayground} from './ui';
+import {
+  renderButton,
+  renderCheckbox,
+  renderCodeTab,
+  renderPlayground,
+} from './ui';
 
 // Declare external types to make eslint happy.
 /* global dat, monaco */
@@ -222,6 +227,7 @@ export function createPlayground(
         // Update editor state.
         editorXmlContextKey.set(isXml);
         editorJsonContextKey.set(isJson);
+        updateImportButtonDisplay();
         playgroundState.set('activeTab', tab.state.name);
         playgroundState.save();
       };
@@ -341,6 +347,26 @@ export function createPlayground(
         playgroundState.save();
       });
 
+      // Create a button to import state from the editor tab to the workspace.
+      const importButton = renderButton('Import');
+      tabButtons.appendChild(importButton);
+      importButton.addEventListener('click', (e) => {
+        if (editorXmlContextKey.get()) {
+          editor.getAction('import-xml').run();
+        }
+        if (editorJsonContextKey.get()) {
+          editor.getAction('import-json').run();
+        }
+      });
+      const updateImportButtonDisplay = function () {
+        // The import button is only relevant for the XML and JSON tabs.
+        if (editorXmlContextKey.get() || editorJsonContextKey.get()) {
+          importButton.style.display = '';
+        } else {
+          importButton.style.display = 'none';
+        }
+      };
+
       // Set the initial tab as active.
       const activeTab = playgroundState.get('activeTab');
       let currentTab = tabs[activeTab];
@@ -552,7 +578,10 @@ function registerEditorCommands(editor, playground) {
     const xml = editor.getModel().getValue();
     const workspace = playground.getWorkspace();
     try {
-      Blockly.Xml.domToWorkspace(Blockly.utils.xml.textToDom(xml), workspace);
+      Blockly.Xml.clearWorkspaceAndLoadFromXml(
+        Blockly.utils.xml.textToDom(xml),
+        workspace,
+      );
     } catch (e) {
       // If this fails that's fine.
       return false;
diff --git a/plugins/dev-tools/src/playground/ui.js b/plugins/dev-tools/src/playground/ui.js
index 9e24f665f1..855b0becd9 100644
--- a/plugins/dev-tools/src/playground/ui.js
+++ b/plugins/dev-tools/src/playground/ui.js
@@ -109,7 +109,6 @@ export function renderPlayground(container) {
   const tabButtons = document.createElement('div');
   tabButtons.style.position = 'absolute';
   tabButtons.style.height = '30px';
-  tabButtons.style.width = '50px';
   tabButtons.style.top = '0';
   tabButtons.style.right = '0';
   tabButtons.style.display = 'flex';
@@ -166,3 +165,15 @@ export function renderCheckbox(id, label) {
   checkboxLabel.setAttribute('for', id);
   return [checkbox, checkboxLabel];
 }
+
+/**
+ * Render a button.
+ * @param {string} label The text content of the button.
+ * @returns {HTMLButtonElement} The button element.
+ */
+export function renderButton(label) {
+  const button = document.createElement('button');
+  button.setAttribute('type', 'button');
+  button.textContent = label;
+  return button;
+}