@saltcorn/builder 1.3.0-beta.10 → 1.3.0-beta.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "1.3.0-beta.10",
+  "version": "1.3.0-beta.12",
   "description": "Drag and drop view builder for Saltcorn, open-source no-code platform",
   "main": "index.js",
   "homepage": "https://saltcorn.com",
@@ -20,7 +20,7 @@
     "@babel/preset-react": "7.24.7",
     "@craftjs/core": "0.1.0-beta.20",
     "@craftjs/utils": "0.1.0-beta.20",
-    "@saltcorn/common-code": "1.3.0-beta.10",
+    "@saltcorn/common-code": "1.3.0-beta.12",
     "saltcorn-craft-layers-noeye": "0.1.0-beta.22",
     "@fonticonpicker/react-fonticonpicker": "1.2.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",

package/src/components/Builder.js

@@ -78,6 +78,8 @@ const { Provider } = optionsCtx;
  * @namespace
  */
 const SettingsPanel = () => {
+  const options = useContext(optionsCtx);
+
   const { actions, selected, query } = useEditor((state, query) => {
     const currentNodeId = state.events.selected;
     let selected;
@@ -170,6 +172,48 @@ const SettingsPanel = () => {
         if (nextSib) actions.selectNode(nextSib);
         event.preventDefault();
       }
+      // Ctrl+C or Cmd+C pressed?
+      if ((event.ctrlKey || event.metaKey) && event.keyCode == 67 && selected) {
+        // copy elem in json format to clipboard
+        const { layout } = craftToSaltcorn(
+          JSON.parse(query.serialize()),
+          selected?.id,
+          options
+        );
+        navigator.clipboard.writeText(JSON.stringify(layout, null, 2));
+      }
+      if ((event.ctrlKey || event.metaKey) && event.keyCode == 88 && selected) {
+        // cut elem in json format to clipboard
+        const { layout } = craftToSaltcorn(
+          JSON.parse(query.serialize()),
+          selected?.id,
+          options
+        );
+        navigator.clipboard.writeText(JSON.stringify(layout, null, 2));
+        deleteThis();
+      }
+      if ((event.ctrlKey || event.metaKey) && event.keyCode == 86) {
+        // paste elem from clipboard into container element
+
+        navigator.clipboard.readText().then((clipText) => {
+          const layout = JSON.parse(clipText);
+          layoutToNodes(
+            layout,
+            query,
+            actions,
+            selected?.id || "ROOT",
+            options
+          );
+        });
+      }
+      if ((event.ctrlKey || event.metaKey) && event.keyCode == 90) {
+        // undo
+        actions.history.undo();
+      }
+      if ((event.ctrlKey || event.metaKey) && event.keyCode == 89) {
+        // redo
+        actions.history.redo();
+      }
     }
   };
   useEffect(() => {
@@ -223,7 +267,10 @@ const SettingsPanel = () => {
         {selected ? (
           <Fragment>
             {selected.isDeletable && (
-              <button className="btn btn-sm btn-danger delete-element-builder" onClick={deleteThis}>
+              <button
+                className="btn btn-sm btn-danger delete-element-builder"
+                onClick={deleteThis}
+              >
                 <FontAwesomeIcon icon={faTrashAlt} className="me-1" />
                 Delete
               </button>
@@ -293,7 +340,10 @@ const AddColumnButton = () => {
     );
   };
   return (
-    <button className="btn btn-primary mt-2 add-column-builder" onClick={addColumn}>
+    <button
+      className="btn btn-primary mt-2 add-column-builder"
+      onClick={addColumn}
+    >
       <FontAwesomeIcon icon={faPlus} className="me-2" />
       Add column
     </button>
@@ -471,7 +521,9 @@ const Builder = ({ options, layout, mode }) => {
                               ? faCaretSquareLeft
                               : faCaretSquareRight
                           }
-                          className={"float-end fa-lg builder-expand-toggle-left"}
+                          className={
+                            "float-end fa-lg builder-expand-toggle-left"
+                          }
                           onClick={() => setIsLeftEnlarged(!isLeftEnlarged)}
                           title={isLeftEnlarged ? "Shrink" : "Enlarge"}
                         />
@@ -545,7 +597,9 @@ const Builder = ({ options, layout, mode }) => {
                         icon={
                           isEnlarged ? faCaretSquareRight : faCaretSquareLeft
                         }
-                        className={"float-end me-2 mt-1 fa-lg builder-expand-toggle-right"}
+                        className={
+                          "float-end me-2 mt-1 fa-lg builder-expand-toggle-right"
+                        }
                         onClick={() => setIsEnlarged(!isEnlarged)}
                         title={isEnlarged ? "Shrink" : "Enlarge"}
                       />