Added "Copy to Clipboard" option to Sidebar with data options.

layouts/scripts/toolbar/data-options/DataOptions.jsx

@@ -78,6 +78,8 @@ function DataOptions(props = {}) {
       {state.data &&
         <pre>{JSON.stringify(state.data, null, 2)}</pre>
       }
+
+      <button className='btn btn--secondary' onClick={(e) => copyToClipboard(e, state.data)}>Copy to Clipboard</button>
     </SidebarStyle>
   </div>;
 
@@ -133,6 +135,33 @@ function DataOptions(props = {}) {
   }
 }
 
+function copyToClipboard(e, context) {
+  e.stopPropagation();
+
+  if (typeof context !== 'string') {
+    context = JSON.stringify(context, null, 2);
+  }
+
+  if (navigator.clipboard && window.isSecureContext) {
+    // This case will not work on non-https pages.
+    return navigator.clipboard.writeText(context);
+  } else {
+    let textArea = document.createElement("textarea");
+    textArea.value = context;
+    textArea.style.position = "fixed";
+    textArea.style.left = "-999999px";
+    textArea.style.top = "-999999px";
+    document.body.appendChild(textArea);
+    // textArea.focus();
+    textArea.select();
+    return new Promise((res, rej) => {
+      document.execCommand('copy') ? res() : rej();
+      textArea.remove();
+      e.target.focus()
+    });
+  }
+}
+
 export function setupDataOptions(rootAttributes) {
   // INIT
   const wrapper = document.createElement('div');

layouts/scripts/toolbar/data-options/data-options.style.js

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 
 export const SidebarStyle = styled.div`
-  --sidebarWidth: 300px;
+  --sidebarWidth: 360px;
   position: fixed;
   top: 0;
   bottom: 0;
@@ -9,12 +9,15 @@ export const SidebarStyle = styled.div`
   width: var(--sidebarWidth);
   background-color: #E2E8F0;
   border-right: 1px solid #CBD5E0;
-  padding: 0 0.75rem;
+  padding: 0 0.75rem 0.75rem;
   box-sizing: border-box;
   overflow: hidden;
   transition: left .2s ease-in-out, visibility .2s ease-in-out;
   visibility: hidden;
   color: #333;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
 
   &.active {
     left: 0;
@@ -28,10 +31,13 @@ export const SidebarStyle = styled.div`
     border-radius: 4px;
     color: #333;
     border: 1px solid #cbd5e0;
+    width: 100%;
+    box-sizing: border-box;
   }
 `;
 
 export const SidebarHeaderStyle = styled.header`
+  width: 100%;
   min-height: 34px;
   padding: 0.5rem 0;
   display: flex;
@@ -84,6 +90,8 @@ export const SidebarDataOptionsStyle = styled.div`
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
+  width: 100%;
+  box-sizing: border-box;
 
   select {
     flex: 1 1;