fix: playground test blocks, text area listeners, and show/hide butto…

…ns (#6015)

tests/playground.html

@@ -7,6 +7,7 @@
  <!-- This script loads uncompressed when on localhost and loads compressed when it is being hosted.
  Please add any other dependencies to playgrounds/prepare.js.-->
 <script src="playgrounds/prepare.js"></script>
+<script src="../node_modules/@blockly/dev-tools/dist/index.js"></script>
 <script type=module>
 import Blockly from './playgrounds/blockly.mjs';
 
@@ -85,7 +86,7 @@
  load();
  }
 
- addClickHandlers();
+ addEventHandlers();
 }
 
 function setBackgroundColour() {
@@ -387,7 +388,7 @@
 // automatically deferred, so it will not be run until after the
 // document has been parsed, but before firing DOMContentLoaded.
 
-function addClickHandlers() {
+function addEventHandlers() {
  document.getElementById('save-json').addEventListener('click', saveJson);
  document.getElementById('save-xml').addEventListener('click', saveXml);
  document.getElementById('import').addEventListener('click', load);
@@ -414,6 +415,14 @@
  .addEventListener('click', function() { logEvents(this.checked) });
  document.getElementById('logFlyoutCheck')
  .addEventListener('click', function() { logFlyoutEvents(this.checked) });
+
+ document.getElementById('importExport').addEventListener('change', taChange);
+ document.getElementById('importExport').addEventListener('keyup', taChange);
+
+ document.getElementById('show')
+ .addEventListener('click', function() { workspace.setVisible(true); });
+ document.getElementById('hide')
+ .addEventListener('click', function() { workspace.setVisible(false); });
 }
 
 start();
@@ -469,9 +478,11 @@
 
  <h1>Blockly Playground</h1>
 
- <p><a href="javascript:void(workspace.setVisible(true))">Show</a>
- - <a href="javascript:void(workspace.setVisible(false))">Hide</a>
- - <a href="playgrounds/advanced_playground.html">Advanced</a></p>
+ <p>
+ <input id="show" type="button" value="Show"></input> -
+ <input id="hide" type="button" value="Hide"></input> -
+ <a href="playgrounds/advanced_playground.html">Advanced</a>
+ </p>
 
  <form id="options">
  <select name="dir" onchange="document.forms.options.submit()">
@@ -496,8 +507,7 @@ <h1>Blockly Playground</h1>
  <input id="to-code-lua" type="button" value="To Lua">
  <input id="to-code-dart" type="button" value="To Dart">
  <br>
- <textarea id="importExport" style="width: 26%; height: 12em"
- onchange="taChange();" onkeyup="taChange()"></textarea>
+ <textarea id="importExport" style="width: 26%; height: 12em"></textarea>
  </p>
 
  <p>