feat(editor): introduce debug mode for element properties

Wrapped element creation and modification properties sections in a div
with a `hide` class, which can now be toggled via a keyboard shortcut
(Ctrl+Shift+Q). This debug mode allows developers to easily view and
hide debugging information about elements being created or modified in
the editor. This enhancement is aimed at improving the development and
troubleshooting process by providing quick access to relevant debug
information without cluttering the UI for users.

Additionally, a new function `toggleDebugVisibility` was added to manage
the visibility of debug information, and a keyboard event listener was
implemented to handle the specified keyboard shortcut.

This update aims to balance the need for detailed debugging information
during development with a clean, user-friendly interface during regular
use.

assets/js/editor.js

@@ -55,7 +55,9 @@ function startCreateElement(event) {
     event.detail.intersection.point.z
   );
 
-  propertiesContent.innerHTML = `<b>Creating element at:</b><br/>
+  propertiesContent.innerHTML = `
+  <div class="hide" id="propertiesDebug">
+    <b>Creating element at:</b><br/>
     X: ${event.detail.intersection.point.x}<br/>
     Y: ${event.detail.intersection.point.y}<br/>
     Z: ${event.detail.intersection.point.z}<br/>
@@ -63,6 +65,7 @@ function startCreateElement(event) {
 
     Parent Element Type: ${event.srcElement.tagName}<br/>
     <hr/>
+  </div>
 
   <form id="newElementForm">
     <label for="resourcetype" class="form-label">Element Type</label>
@@ -198,11 +201,14 @@ function startModifyElement(event) {
   element_data_request.then((element_data) => {
     var propertiesContent = document.getElementById("propertiesContent");
 
-    propertiesContent.innerHTML = `<b>Modifying element:</b><br/>
+    propertiesContent.innerHTML = `
+    <div class="hide" id="propertiesDebug">
+      <b>Modifying element:</b><br/>
       Element Type: ${event.srcElement.tagName}<br/>
       Element ID: ${event.target.getAttribute("id")}<br/>
       Element data: ${JSON.stringify(element_data.obj)}<br/>
       <hr/>
+    </div>
     
     <form id="modifyElementForm">
       <input type="hidden" id="csrfmiddlewaretoken" value="${getCookie(
@@ -325,3 +331,15 @@ document.addEventListener("loadedQuackscapeScene", function (event) {
     }
   }
 });
+
+function toggleDebugVisibility() {
+  const debugElement = document.getElementById("propertiesDebug");
+  debugElement.classList.toggle("hide");
+}
+
+document.addEventListener('keydown', function(event) {
+  if (event.ctrlKey && event.shiftKey && event.key === 'Q') {
+    toggleDebugVisibility();
+    event.preventDefault();
+  }
+});