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

layouts/scripts/dist/index.min.js

@@ -9556,7 +9556,7 @@ function setupPublish(rootAttributes) {
 }
 
 const SidebarStyle = qe.div`
-  --sidebarWidth: 300px;
+  --sidebarWidth: 360px;
   position: fixed;
   top: 0;
   bottom: 0;
@@ -9564,12 +9564,15 @@ const SidebarStyle = qe.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;
@@ -9583,9 +9586,12 @@ const SidebarStyle = qe.div`
     border-radius: 4px;
     color: #333;
     border: 1px solid #cbd5e0;
+    width: 100%;
+    box-sizing: border-box;
   }
 `;
 const SidebarHeaderStyle = qe.header`
+  width: 100%;
   min-height: 34px;
   padding: 0.5rem 0;
   display: flex;
@@ -9635,6 +9641,8 @@ const SidebarDataOptionsStyle = qe.div`
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
+  width: 100%;
+  box-sizing: border-box;
 
   select {
     flex: 1 1;
@@ -9941,7 +9949,10 @@ function DataOptions(props = {}) {
       value: item,
       selected: isSelected
     }, item);
-  }))), state.data && /*#__PURE__*/React.createElement("pre", null, JSON.stringify(state.data, null, 2))));
+  }))), state.data && /*#__PURE__*/React.createElement("pre", null, JSON.stringify(state.data, null, 2)), /*#__PURE__*/React.createElement("button", {
+    className: "btn btn--secondary",
+    onClick: e => copyToClipboard(e, state.data)
+  }, "Copy to Clipboard")));
 
   //
   // Functions
@@ -9989,6 +10000,30 @@ function DataOptions(props = {}) {
     setPreviewOption(getDesignPreviewImage(state.dataName, state.designPreview));
   }
 }
+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();
+    });
+  }
+}
 function setupDataOptions(rootAttributes) {
   // INIT
   const wrapper = document.createElement('div');

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;

layouts/styles/_buttons.scss

@@ -3,7 +3,7 @@
   --btn-background-color: white;
   display: inline-block;
   padding: calc(0.375rem - 2px) 0.75rem;
-  font-size: 1rem;
+  font-size: 0.875rem;
   line-height: 1.5;
   text-align: center;
   text-decoration: none;
@@ -22,4 +22,10 @@
     --btn-color: white;
     --btn-background-color: #333;
   }
+
+  &--secondary {
+    border-color: #cbd5e0;
+    --btn-color: #333;
+    --btn-background-color: #edf2f7;
+  }
 }

layouts/styles/page--main.css

@@ -14,7 +14,7 @@ body {
   --btn-background-color: white;
   display: inline-block;
   padding: calc(0.375rem - 2px) 0.75rem;
-  font-size: 1rem;
+  font-size: 0.875rem;
   line-height: 1.5;
   text-align: center;
   text-decoration: none;
@@ -32,6 +32,11 @@ body {
   --btn-color: white;
   --btn-background-color: #333;
 }
+.btn--secondary {
+  border-color: #cbd5e0;
+  --btn-color: #333;
+  --btn-background-color: #edf2f7;
+}
 
 .overlay {
   position: fixed;
@@ -50,6 +55,8 @@ body {
 .page_toolbar {
   --gap: 2.5rem;
   font-size: 14px;
+  min-height: 50px;
+  box-sizing: border-box;
   font-family: Arial, sans-serif;
   background-color: #EDF2F7;
   padding: var(--top_panel_vertical_height) 1rem;

layouts/styles/page--main.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["page--main.scss","_buttons.scss","_overlay.scss","_page--preview.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;EACE;EACA;EAEA;;;ACTF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;ACtBJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AFIF;EACE;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EADF;IAEI;;;AAKN;EAEE;EACA;EACA;EACA;;AAGF;EACE;;;AGhFJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EAEA;;AAEA;EACE;EAEA;EACA;;;AH2DJ;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"page--main.css"}
+{"version":3,"sourceRoot":"","sources":["page--main.scss","_buttons.scss","_overlay.scss","_page--preview.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;EACE;EACA;EAEA;;;ACTF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;;AC5BJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AFIF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EADF;IAEI;;;AAKN;EAEE;EACA;EACA;EACA;;AAGF;EACE;;;AGlFJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EAEA;;AAEA;EACE;EAEA;EACA;;;AH6DJ;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"page--main.css"}

layouts/styles/page--main.scss

@@ -16,6 +16,8 @@ body {
 .page_toolbar {
   --gap: 2.5rem;
   font-size: 14px;
+  min-height: 50px;
+  box-sizing: border-box;
 
   font-family: Arial, sans-serif;
   background-color: #EDF2F7;