@saltcorn/builder 1.6.0-alpha.8 → 1.6.0-beta.1

package/src/components/RenderNode.js

@@ -47,7 +47,7 @@ const RenderNode = ({ render }) => {
   } = useNode((node) => ({
     isHover: node.events.hovered,
     dom: node.dom,
-    name: node.data.custom.displayName || node.data.displayName,
+    name: node.data.custom.displayName || node.data.props?.custom?.displayName || node.data.displayName,
     moveable: query.node(node.id).isDraggable(),
     deletable: query.node(node.id).isDeletable(),
     parent: node.data.parent,
@@ -80,9 +80,27 @@ const RenderNode = ({ render }) => {
     currentDOM.style.left = left;
   }, [dom, getPos]);
 
+  const hiddenColumnParents = new Set(["Card", "Container", "Table", "DropMenu"]);
   useEffect(() => {
-    if (name === "Column" && parent && parent !== "ROOT")
-      actions.selectNode(parent);
+    if (!isActive) return;
+    if (name === "Column" && parent && parent !== "ROOT") {
+      const parentNode = query.node(parent).get();
+      const parentName = parentNode?.data?.displayName;
+      const parentLinked = parentNode?.data?.linkedNodes;
+      if (
+        hiddenColumnParents.has(parentName) &&
+        parentLinked &&
+        Object.values(parentLinked).includes(id)
+      ) {
+        const currentlySelected = query.getEvent("selected").all();
+        const otherSelected = currentlySelected.filter((nid) => nid !== id);
+        if (otherSelected.length > 0) {
+          actions.selectNode([...otherSelected, parent]);
+        } else {
+          actions.selectNode(parent);
+        }
+      }
+    }
   }, [isActive]);
 
   useEffect(() => {

package/src/components/Toolbox.js

@@ -29,6 +29,7 @@ import { View } from "./elements/View";
 import { SearchBar } from "./elements/SearchBar";
 import { Link } from "./elements/Link";
 import { Page } from "./elements/Page";
+import { Prompt } from "./elements/Prompt";
 import optionsCtx from "./context";
 import {
   BoundingBox,
@@ -84,6 +85,7 @@ const WrapElem = ({
     }  d-inline-flex wrap-builder-elem align-items-center justify-content-center`}
     title={title}
     ref={disable ? undefined : (ref) => connectors.create(ref, children)}
+    onContextMenu={(e) => e.preventDefault()}
   >
     <div
       className={`inner ${innerClass || ""}`}
@@ -115,7 +117,7 @@ const TextElem = ({ connectors }) => {
       fontSize="22px"
       title={t("Text")}
       bold
-      label={t("Text")}
+      label="Text"
     >
       <Text text="Hello world" block={false} textStyle={""} />
     </WrapElem>
@@ -137,7 +139,7 @@ const ColumnsElem = ({ connectors }) => {
       innerClass="mt-m1px"
       icon="fas fa-columns"
       title={t("Split into columns")}
-      label={t("Columns")}
+      label="Columns"
     >
       <Columns contents={[]} setting_col_n={1} />
     </WrapElem>
@@ -158,7 +160,7 @@ const TabsElem = ({ connectors }) => {
       connectors={connectors}
       icon={<SegmentedNav className="mb-2 h4" />}
       title={t("Tabbed content")}
-      label={t("Tabs")}
+      label="Tabs"
     >
       <Tabs contents={[]} />
     </WrapElem>
@@ -180,7 +182,7 @@ const LineBreakElem = ({ connectors }) => {
       text="↵"
       fontSize="26px"
       title={t("Line break")}
-      label={t("Break")}
+      label="Break"
     >
       <LineBreak />
     </WrapElem>
@@ -201,7 +203,7 @@ const HTMLElem = ({ connectors }) => {
       connectors={connectors}
       icon="fas fa-code"
       title={t("HTML code")}
-      label={t("Code")}
+      label="Code"
     >
       <HTMLCode text={""} />
     </WrapElem>
@@ -222,7 +224,7 @@ const CardElem = ({ connectors }) => {
       connectors={connectors}
       title={t("Card")}
       icon="far fa-square"
-      label={t("Card")}
+      label="Card"
     >
       <Element canvas is={Card} isFormula={{}} url=""></Element>
     </WrapElem>
@@ -243,7 +245,7 @@ const ImageElem = ({ connectors, images }) => {
       connectors={connectors}
       icon="fas fa-image"
       title={t("Image")}
-      label={t("Image")}
+      label="Image"
     >
       <Image fileid={images.length > 0 ? images[0].id : 0} />
     </WrapElem>
@@ -264,7 +266,7 @@ const LinkElem = ({ connectors }) => {
       connectors={connectors}
       icon="fas fa-link"
       title={t("Link")}
-      label={t("Link")}
+      label="Link"
     >
       <Link />
     </WrapElem>
@@ -285,7 +287,7 @@ const ViewElem = ({ connectors, views, isPageEdit }) => {
       connectors={connectors}
       icon="fas fa-eye"
       title={t("Embed a view")}
-      label={t("View")}
+      label="View"
       disable={!views || views.length < (!isPageEdit ? 2 : 1)}
     >
       <View
@@ -311,7 +313,7 @@ const SearchElem = ({ connectors }) => {
       connectors={connectors}
       icon="fas fa-search"
       title={t("Search bar")}
-      label={t("Search")}
+      label="Search"
     >
       <Element canvas is={SearchBar}></Element>
     </WrapElem>
@@ -332,7 +334,7 @@ const ContainerElem = ({ connectors }) => {
       connectors={connectors}
       icon={<BoundingBox className="mb-2 h5" />}
       title={t("Container")}
-      label={t("Contain")}
+      label="Contain"
     >
       <Element canvas is={Container}></Element>
     </WrapElem>
@@ -353,7 +355,7 @@ const FieldElem = ({ connectors, fields, field_view_options }) => {
       connectors={connectors}
       icon="fas fa-asterisk"
       title={t("Field")}
-      label={t("Field")}
+      label="Field"
     >
       <Field
         name={fields[0].name}
@@ -380,7 +382,7 @@ const DropDownFilterElem = ({ connectors, fields }) => {
       connectors={connectors}
       icon="far fa-caret-square-down"
       title={t("Dropdown filter")}
-      label={t("Select")}
+      label="Select"
     >
       <DropDownFilter
         name={fields[0].name}
@@ -399,7 +401,7 @@ const DropMenuElem = ({ connectors }) => {
       connectors={connectors}
       icon="far fa-caret-square-down"
       title={t("Dropdown menu")}
-      label={t("DropMenu")}
+      label="DropMenu"
     >
       <Element canvas is={DropMenu}></Element>
     </WrapElem>
@@ -413,7 +415,7 @@ const PageElem = ({ connectors, pages }) => {
       connectors={connectors}
       icon="fa-fw far fa-file"
       title={t("Embed a page")}
-      label={t("Page")}
+      label="Page"
       disable={pages.length <= 1}
     >
       <Page page={pages.length > 0 ? pages[0].name : "page"} />
@@ -436,7 +438,7 @@ const ToggleFilterElem = ({ connectors, fields }) => {
       connectors={connectors}
       icon="fas fa-toggle-on"
       title={t("Toggle filter")}
-      label={t("Toggle")}
+      label="Toggle"
     >
       <ToggleFilter name={fields[0].name} value={""} label={""} block={false} />
     </WrapElem>
@@ -457,7 +459,7 @@ const JoinFieldElem = ({ connectors, options }) => {
       connectors={connectors}
       icon={<Diagram3Fill className="mb-2 h5" />}
       title={t("Join field")}
-      label={t("Join")}
+      label="Join"
       disable={options.parent_field_list.length === 0}
     >
       <JoinField
@@ -484,7 +486,7 @@ const ViewLinkElem = ({ connectors, options }) => {
       connectors={connectors}
       icons={["fas fa-eye", "fas fa-link"]}
       title={t("Link to a view")}
-      label={t("ViewLink")}
+      label="ViewLink"
       disable={!options.views || options.views.length < 2}
     >
       <ViewLink
@@ -510,7 +512,7 @@ const ActionElem = ({ connectors, options }) => {
   return (
     <WrapElem
       connectors={connectors}
-      label={t("Action")}
+      label="Action"
       icon="fas fa-running"
       title={t("Action button")}
     >
@@ -549,7 +551,7 @@ const AggregationElem = ({ connectors, child_field_list, agg_field_opts }) => {
       connectors={connectors}
       text="∑"
       title={t("Aggregation")}
-      label={t("Aggreg8")}
+      label="Aggreg8"
       bold
       fontSize="16px"
       disable={child_field_list.length === 0}
@@ -574,15 +576,71 @@ const TableElem = ({ connectors }) => {
       innerClass="mt-m1px"
       icon="fas fa-table"
       title={t("Table")}
-      label={t("Table")}
+      label="Table"
     >
       <Table contents={[[], []]} rows={2} columns={2} />
     </WrapElem>
   );
 };
 
+const PromptContainerElem = ({ connectors }) => {
+  const { t } = useTranslation();
+  return (
+    <WrapElem
+      connectors={connectors}
+      icon="fas fa-robot"
+      title={t("Generate with AI")}
+      label="Generate"
+    >
+      <Prompt promptType="container" promptText="" />
+    </WrapElem>
+  );
+};
+
+const PromptViewElem = ({ connectors }) => {
+  const { t } = useTranslation();
+  return (
+    <WrapElem
+      connectors={connectors}
+      icon="fas fa-eye"
+      title={t("Prompt View")}
+      label="Prompt View"
+    >
+      <Prompt promptType="view" promptText="" />
+    </WrapElem>
+  );
+};
+
+const PromptFieldElem = ({ connectors }) => {
+  const { t } = useTranslation();
+  return (
+    <WrapElem
+      connectors={connectors}
+      icon="fas fa-i-cursor"
+      title={t("Prompt Field")}
+      label="Prompt Field"
+    >
+      <Prompt promptType="field" promptText="" />
+    </WrapElem>
+  );
+};
+
+const PromptActionElem = ({ connectors }) => {
+  const { t } = useTranslation();
+  return (
+    <WrapElem
+      connectors={connectors}
+      icon="fas fa-bolt"
+      title={t("Prompt Action")}
+      label="Prompt Action"
+    >
+      <Prompt promptType="action" promptText="" />
+    </WrapElem>
+  );
+};
+
 const chunkToolBox = (elems, expanded) => {
-  const chunks = chunk(elems, expanded ? 3 : 2);
+  const chunks = chunk(elems.filter(Boolean), expanded ? 3 : 2);
   return chunks.map((es, ix) => (
     <div className="toolbar-row" key={ix}>
       {es.map((e, j) => (
@@ -638,6 +696,10 @@ const ToolboxShow = ({ expanded }) => {
       <DropMenuElem connectors={connectors} />,
       <TableElem connectors={connectors} />,
       <PageElem connectors={connectors} pages={pages} />,
+      options.has_copilot_generate && <PromptContainerElem connectors={connectors} />,
+      // <PromptViewElem connectors={connectors} />,
+      // <PromptFieldElem connectors={connectors} />,
+      // <PromptActionElem connectors={connectors} />,
     ],
     expanded
   );
@@ -696,6 +758,10 @@ const ToolboxList = ({ expanded }) => {
         <DropMenuElem connectors={connectors} />
       ),
       //  <TableElem connectors={connectors} />,
+      options.has_copilot_generate && <PromptContainerElem connectors={connectors} />,
+      // <PromptViewElem connectors={connectors} />,
+      // <PromptFieldElem connectors={connectors} />,
+      // <PromptActionElem connectors={connectors} />,
       options.allowMultipleElementsPerColumn &&
         !disable_toolbox?.line_break && (
           <LineBreakElem connectors={connectors} />
@@ -750,6 +816,10 @@ const ToolboxFilter = ({ expanded }) => {
       <TableElem connectors={connectors} />,
       <DropMenuElem connectors={connectors} />,
       <PageElem connectors={connectors} pages={pages} />,
+      options.has_copilot_generate && <PromptContainerElem connectors={connectors} />,
+      // <PromptViewElem connectors={connectors} />,
+      // <PromptFieldElem connectors={connectors} />,
+      // <PromptActionElem connectors={connectors} />,
     ],
     expanded
   );
@@ -787,6 +857,10 @@ const ToolboxEdit = ({ expanded }) => {
       <DropMenuElem connectors={connectors} />,
       <TableElem connectors={connectors} />,
       <ViewLinkElem connectors={connectors} options={options} />,
+      options.has_copilot_generate && <PromptContainerElem connectors={connectors} />,
+      // <PromptViewElem connectors={connectors} />,
+      // <PromptFieldElem connectors={connectors} />,
+      // <PromptActionElem connectors={connectors} />,
     ],
     expanded
   );
@@ -819,6 +893,10 @@ const ToolboxPage = ({ expanded }) => {
       <DropMenuElem connectors={connectors} />,
       <PageElem connectors={connectors} pages={pages} />,
       <TableElem connectors={connectors} />,
+      options.has_copilot_generate && <PromptContainerElem connectors={connectors} />,
+      // <PromptViewElem connectors={connectors} />,
+      // <PromptFieldElem connectors={connectors} />,
+      // <PromptActionElem connectors={connectors} />,
     ],
     expanded
   );

package/src/components/elements/Action.js

@@ -5,7 +5,7 @@
  */
 /*global notifyAlert, apply_showif*/
 
-import React, { Fragment, useContext, useEffect, useState } from "react";
+import React, { Fragment, useContext, useEffect } from "react";
 import { useNode } from "@craftjs/core";
 import useTranslation from "../../hooks/useTranslation";
 import optionsCtx from "../context";
@@ -25,7 +25,7 @@ import {
 } from "./utils";
 import { ntimes } from "./Columns";
 import { ArrayManager } from "./ArrayManager";
-import { MultiLineCodeEditor } from "./MonacoEditor";
+
 import Select from "react-select";
 
 export /**
@@ -55,6 +55,7 @@ const Action = ({
   action_bgcol,
   action_bordercol,
   action_textcol,
+  action_class
 }) => {
   const {
     selected,
@@ -65,7 +66,7 @@ const Action = ({
    */
   return (
     <button
-      className={`btn ${action_style || "btn-primary"} ${action_size || ""} ${
+      className={`btn ${action_style || "btn-primary"} ${action_size || ""} ${action_class || ""} ${
         selected ? "selected-node" : ""
       } ${block ? "d-block" : ""}`}
       ref={(dom) => connect(drag(dom))}
@@ -146,13 +147,6 @@ const ActionSettings = () => {
   const options = useContext(optionsCtx);
   const getCfgFields = (fv) => (options.actionConfigForms || {})[fv];
   const cfgFields = getCfgFields(name);
-  const cfgFieldsForForm =
-    name === "run_js_code"
-      ? (cfgFields || []).filter((f) => f.name !== "code")
-      : cfgFields;
-
-  const runJsCodeModalOnly = false;
-  const [codeModalOpen, setCodeModalOpen] = useState(false);
   const setAProp = setAPropGen(setProp);
   const use_setting_action_n =
     setting_action_n || setting_action_n === 0 ? setting_action_n : 0;
@@ -274,7 +268,7 @@ const ActionSettings = () => {
               <td>
                 <select
                   value={action_row_variable}
-                  className="form-control form-select code-modal-form"
+                  className="form-control form-select"
                   onChange={(e) => {
                     if (!e.target) return;
                     const value = e.target.value;
@@ -457,116 +451,12 @@ const ActionSettings = () => {
           ) : null}
         </Fragment>
       ) : cfgFields ? (
-        <Fragment>
-          {name === "run_js_code" && runJsCodeModalOnly ? (
-            <div className="builder-config-field" data-field-name="code">
-              <label>{t("Code")}</label>
-              <button
-                type="button"
-                className="btn btn-secondary btn-sm"
-                onClick={() => setCodeModalOpen(true)}
-              >
-                {t("Open Code Popup")}
-              </button>
-            </div>
-          ) : null}
-          {name === "run_js_code" && !runJsCodeModalOnly ? (
-            <Fragment>
-              <ConfigForm
-                fields={(cfgFields || []).filter((f) => f.name === "code")}
-                configuration={configuration}
-                setProp={setProp}
-                node={node}
-                openPopup={() => setCodeModalOpen(true)}
-              />
-              {/* <div className="builder-config-field mt-2" data-field-name="code-modal-trigger">
-                <button
-                  type="button"
-                  className="btn btn-secondary btn-sm"
-                  onClick={() => setCodeModalOpen(true)}
-                >
-                  {t("Open Code Popup")}
-                </button>
-              </div> */}
-              <ConfigForm
-                fields={cfgFieldsForForm}
-                configuration={configuration}
-                setProp={setProp}
-                node={node}
-              />
-            </Fragment>
-          ) : (
-            <ConfigForm
-              fields={runJsCodeModalOnly ? cfgFieldsForForm : cfgFields}
-              configuration={configuration}
-              setProp={setProp}
-              node={node}
-            />
-          )}
-          {name === "run_js_code" && codeModalOpen ? (
-                <div
-                  className={`modal fade ${codeModalOpen ? "show" : ""}`}
-                  style={{
-                    display: codeModalOpen ? "block" : "none",
-                    zIndex: 1055,
-                  }}
-                  tabIndex={-1}
-                  role="dialog"
-                  aria-labelledby="codeModalLabel"
-                  aria-hidden={!codeModalOpen}
-                >
-                  <div
-                    className="modal-backdrop fade show"
-                    style={{ zIndex: 1050 }}
-                    onClick={() => setCodeModalOpen(false)}
-                    aria-hidden="true"
-                  />
-                  <div
-                    className="modal-dialog modal-dialog-centered modal-lg"
-                    role="document"
-                    style={{ zIndex: 1060 }}
-                    onClick={(e) => e.stopPropagation()}
-                  >
-                    <div className="modal-content code-modal">
-                      <div className="modal-header">
-                        <h5 className="modal-title" id="codeModalLabel">
-                          {t("Code")}
-                        </h5>
-                        <button
-                          type="button"
-                          className="btn-close"
-                          aria-label="Close"
-                          onClick={() => setCodeModalOpen(false)}
-                        />
-                      </div>
-                      <div className="modal-body">
-                        <MultiLineCodeEditor
-                          setProp={setProp}
-                          value={configuration?.code ?? ""}
-                          onChange={(code) =>
-                            setProp((prop) => {
-                              if (!prop.configuration)
-                                prop.configuration = {};
-                              prop.configuration.code = code;
-                            })
-                          }
-                          isModalEditor
-                        />
-                      </div>
-                      <div className="modal-footer">
-                        <button
-                          type="button"
-                          className="btn btn-secondary"
-                          onClick={() => setCodeModalOpen(false)}
-                        >
-                          {t("Close")}
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              ) : null}
-        </Fragment>
+        <ConfigForm
+          fields={cfgFields}
+          configuration={configuration}
+          setProp={setProp}
+          node={node}
+        />
       ) : null}
       {cfg_link ? (
         <a className="d-block mt-2" target="_blank" href={cfg_link}>

package/src/components/elements/ArrayManager.js

@@ -56,6 +56,8 @@ export const ArrayManager = ({
   managedArrays,
   manageContents,
   initialAddProps,
+   contentsKey = "contents",
+  onLayoutChange,
 }) => {
   const { t } = useTranslation();
   const { actions, query, connectors } = useEditor((state, query) => {
@@ -77,13 +79,14 @@ export const ArrayManager = ({
         node.id,
         options
       );
-      layout.contents.splice(rmIx, 1);
+      layout[contentsKey].splice(rmIx, 1);
 
       managedArrays.forEach((arrNm) => {
-        layout[arrNm].splice(rmIx, 1);
+         if (layout[arrNm]) layout[arrNm].splice(rmIx, 1);
       });
       layout[countProp] = node[countProp] - 1;
-      layout[currentProp] = node[currentProp] - 1;
+      layout[currentProp] = Math.max(0, node[currentProp] - 1);
+      if (onLayoutChange) onLayoutChange(layout, "delete");
       actions.delete(node.id);
       layoutToNodes(layout, query, actions, parentId, options, sibIx);
     } else {
@@ -119,7 +122,7 @@ export const ArrayManager = ({
         options
       );
 
-      swapElements(layout.contents, curIx, curIx + delta);
+      swapElements(layout[contentsKey], curIx, curIx + delta);
 
       managedArrays.forEach((arrNm) => {
         if (arrNm.includes(".")) {
@@ -130,6 +133,7 @@ export const ArrayManager = ({
           swapElements(layout[arrNm], curIx, curIx + delta);
       });
       layout[currentProp] = node[currentProp] + delta;
+      if (onLayoutChange) onLayoutChange(layout, "move");
       actions.delete(node.id);
       layoutToNodes(layout, query, actions, parentId, options, sibIx);
     } else
@@ -156,7 +160,7 @@ export const ArrayManager = ({
         options
       );
 
-      layout.contents.push(null);
+      layout[contentsKey].push(null);
       managedArrays.forEach((arrNm) => {
         if (initialAddProps?.[arrNm])
           layout[arrNm][node[countProp]] = initialAddProps?.[arrNm];
@@ -164,6 +168,7 @@ export const ArrayManager = ({
       layout[currentProp] = +node[countProp];
       layout[countProp] = +node[countProp] + 1;
 
+      if (onLayoutChange) onLayoutChange(layout, "add");
       actions.delete(node.id);
       layoutToNodes(layout, query, actions, parentId, options, sibIx);
     } else

package/src/components/elements/BoxModelEditor.js

@@ -7,6 +7,12 @@
 import React, { useContext, Fragment, useState } from "react";
 import useTranslation from "../../hooks/useTranslation";
 import { SettingsRow, SettingsSectionHeaderRow, bstyleopt } from "./utils";
+import PreviewCtx from "../preview_context";
+import {
+  getDeviceSizeNode,
+  getDeviceSizeSetProp,
+  getDisplaySize,
+} from "../../utils/responsive_utils";
 /* 
 Contains code from https://github.com/tpaksu/boxmodel
 Copyright (c) 2017 Taha Paksu
@@ -24,6 +30,7 @@ export /**
  */
 const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
   const { t } = useTranslation();
+  const { previewDevice } = useContext(PreviewCtx);
   const [selectedCategory, setSelectedCategory] = useState(false);
   const [selectedDirection, setSelectedDirection] = useState(false);
   const selectedProperty = !selectedCategory
@@ -35,7 +42,13 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
     setSelectedCategory(c);
     setSelectedDirection(d);
   };
-  //console.log(node.style);
+  const isDesktop = !previewDevice || previewDevice === "desktop";
+  const deviceLabel = previewDevice === "mobile"
+    ? ` (${t("mobile")})`
+    : previewDevice === "tablet"
+      ? ` (${t("tablet")})`
+      : "";
+
   const style = node.style;
   return (
     <Fragment>
@@ -147,13 +160,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
                             autoComplete="off"
                             name="boxmodel-ex-1_width"
                             size="3"
-                            value={
-                              sizeWithStyle
-                                ? style["width"]
-                                : node.width
-                                  ? `${node.width}${node.widthUnit || "px"}`
-                                  : ""
-                            }
+                            value={getDisplaySize(node, "width", previewDevice, sizeWithStyle)}
                           />
                           x
                           <input
@@ -162,13 +169,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
                             autoComplete="off"
                             name="boxmodel-ex-1_height"
                             size="3"
-                            value={
-                              sizeWithStyle
-                                ? style["height"]
-                                : node.height
-                                  ? `${node.height}${node.heightUnit || "px"}`
-                                  : ""
-                            }
+                            value={getDisplaySize(node, "height", previewDevice, sizeWithStyle)}
                           />
                         </div>
                         <span
@@ -276,13 +277,13 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
               <SettingsRow
                 field={{
                   name: "width",
-                  label: t("width"),
+                  label: t("width") + deviceLabel,
                   type: "DimUnits",
                   horiz: true,
                 }}
-                node={node}
-                setProp={setProp}
-                isStyle={!!sizeWithStyle}
+                node={isDesktop ? node : getDeviceSizeNode(node, "width", previewDevice)}
+                setProp={isDesktop ? setProp : getDeviceSizeSetProp(setProp, "width", previewDevice)}
+                isStyle={isDesktop ? !!sizeWithStyle : true}
               />
               <SettingsRow
                 field={{
@@ -307,10 +308,10 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
                 isStyle={true}
               />
               <SettingsRow
-                field={{ name: "height", label: t("height"), type: "DimUnits" }}
-                node={node}
-                setProp={setProp}
-                isStyle={!!sizeWithStyle}
+                field={{ name: "height", label: t("height") + deviceLabel, type: "DimUnits" }}
+                node={isDesktop ? node : getDeviceSizeNode(node, "height", previewDevice)}
+                setProp={isDesktop ? setProp : getDeviceSizeSetProp(setProp, "height", previewDevice)}
+                isStyle={isDesktop ? !!sizeWithStyle : true}
               />
               <SettingsRow
                 field={{