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

package/src/components/elements/utils.js

@@ -707,7 +707,8 @@ const fetchPreview = ({ url, body, options, setPreviews, node_id, isView }) => {
       else return "";
     })
     .then(function (html) {
-      $(".preview-scratchpad").html(html);
+      const scratchpad = document.querySelector(".preview-scratchpad");
+      if (scratchpad) scratchpad.innerHTML = html;
       $(".preview-scratchpad").find("iframe").css("pointer-events", "none");
       $(".preview-scratchpad").find("a").attr("href", "#");
       $(".preview-scratchpad")
@@ -936,7 +937,7 @@ const ColorInput = ({ value, onChange }) =>
     </button>
   );
 
-const CodeFieldWithModal = ({ value, onChange, setProp, mode, label, hideLabel }) => {
+const CodeFieldWithModal = ({ value, onChange, setProp, mode, label, hideLabel, placeholder, nojoins }) => {
   const [modalOpen, setModalOpen] = useState(false);
   const { t } = useTranslation();
   return (
@@ -965,6 +966,8 @@ const CodeFieldWithModal = ({ value, onChange, setProp, mode, label, hideLabel }
         value={value}
         onChange={onChange}
         mode={mode}
+        placeholder={placeholder}
+        nojoins={nojoins}
       />
       {modalOpen ? (
         <div
@@ -1052,15 +1055,17 @@ const ConfigForm = ({
       if (f.showIf && configuration) {
         let noshow = false;
         Object.entries(f.showIf).forEach(([nm, value]) => {
+          const cfgVal = configuration[nm];
+          const effectiveVal = cfgVal === undefined ? false : cfgVal;
           if (Array.isArray(value))
-            noshow = noshow || !value.includes(configuration[nm]);
-          else noshow = noshow || value !== configuration[nm];
+            noshow = noshow || !value.includes(effectiveVal);
+          else noshow = noshow || value !== effectiveVal;
         });
         if (noshow) return null;
       }
       return (
         <div key={ix} className="builder-config-field" data-field-name={f.name}>
-          {!isCheckbox(f) && f.input_type !== "code" ? (
+          {!isCheckbox(f) && (f.input_type !== "code" || f.attributes?.singleline) ? (
             <label>
               {f.label || f.name}
               {f.help ? (
@@ -1326,19 +1331,11 @@ const ConfigField = ({
       />
     ),
     code: () => {
-      if (
-        field?.attributes?.expression_type === "row" ||
-        field?.attributes?.expression_type === "query"
-      ) {
+      if (field?.attributes?.singleline) {
         return (
-          <textarea
-            rows="6"
-            type="text"
-            className={`field-${field?.name} form-control`}
-            value={value}
-            name={field?.name}
-            onChange={(e) => e.target && myOnChange(e.target.value)}
-            spellCheck={false}
+          <SingleLineEditor
+            value={value || ""}
+            onChange={myOnChange}
           />
         );
       }
@@ -1349,6 +1346,8 @@ const ConfigField = ({
           setProp={setProp}
           mode={field?.attributes?.mode}
           label={field?.label || field?.name || "Code"}
+          placeholder={field?.attributes?.placeholder}
+          nojoins={field?.attributes?.nojoins}
         />
       );
     },
@@ -1382,31 +1381,40 @@ const ConfigField = ({
             styles={reactSelectStyles()}
           ></Select>
         );
-      } else
+      } else {
+        const explainerText = field.attributes?.explainers?.[value || ""];
         return (
-          <select
-            className={`field-${field?.name} form-control form-select`}
-            value={value || ""}
-            name={field?.name}
-            onChange={(e) => e.target && myOnChange(e.target.value)}
-            onBlur={(e) => e.target && myOnChange(e.target.value)}
-            data-fieldname={field?.name}
-          >
-            {(field.options || []).map((o, ix) =>
-              o.name && o.label ? (
-                <option key={ix} value={o.name}>
-                  {o.label}
-                </option>
-              ) : o.value && o.label ? (
-                <option key={ix} value={o.value}>
-                  {o.label}
-                </option>
-              ) : (
-                <option key={ix}>{o}</option>
-              )
+          <Fragment>
+            <select
+              className={`field-${field?.name} form-control form-select`}
+              value={value || ""}
+              name={field?.name}
+              onChange={(e) => e.target && myOnChange(e.target.value)}
+              onBlur={(e) => e.target && myOnChange(e.target.value)}
+              data-fieldname={field?.name}
+            >
+              {(field.options || []).map((o, ix) =>
+                o.name && o.label ? (
+                  <option key={ix} value={o.name}>
+                    {o.label}
+                  </option>
+                ) : o.value && o.label ? (
+                  <option key={ix} value={o.value}>
+                    {o.label}
+                  </option>
+                ) : (
+                  <option key={ix}>{o}</option>
+                )
+              )}
+            </select>
+            {explainerText && (
+              <div className="alert alert-info py-1 px-2 my-1 small">
+                <strong>{value}</strong>: {explainerText}
+              </div>
             )}
-          </select>
+          </Fragment>
         );
+      }
     },
     btn_select: () => (
       <div className="btn-group w-100" role="group">
@@ -1543,9 +1551,11 @@ const SettingsFromFields =
             if (f.showIf) {
               let noshow = false;
               Object.entries(f.showIf).forEach(([nm, value]) => {
+                const cfgVal = node[nm];
+                const effectiveVal = cfgVal === undefined ? false : cfgVal;
                 if (Array.isArray(value))
-                  noshow = noshow || !value.includes(node[nm]);
-                else noshow = noshow || value !== node[nm];
+                  noshow = noshow || !value.includes(effectiveVal);
+                else noshow = noshow || value !== effectiveVal;
               });
               if (noshow) return null;
             }
@@ -1630,7 +1640,7 @@ const SettingsRow = ({
     <tr>
       {fullWidth ? (
         <td colSpan="2">
-          {needLabel && field.input_type !== "code" && <label>{field.label}</label>}
+          {needLabel && (field.input_type !== "code" || field.attributes?.singleline) && <label>{field.label}</label>}
           {inner}
           {field.sublabel ? (
             <i

package/src/components/storage.js

@@ -152,7 +152,7 @@ const layoutToNodes = (
         }
       });
       if (related.fields.some((f) => f.canBeFormula))
-        props.isFormula = segment.isFormula;
+        props.isFormula = segment.isFormula ?? {};
       if (related.hasContents)
         return (
           <Element