@saltcorn/builder 0.7.3 → 0.7.4-beta.2

package/src/components/elements/utils.js

@@ -10,11 +10,13 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faChevronDown,
   faChevronRight,
+  faInfoCircle
 } from "@fortawesome/free-solid-svg-icons";
 import { useNode, Element } from "@craftjs/core";
 import FontIconPicker from "@fonticonpicker/react-fonticonpicker";
 import faIcons from "./faicons";
 import { Columns, ntimes } from "./Columns";
+import Tippy from '@tippyjs/react';
 
 export const DynamicFontAwesomeIcon = ({ icon, className }) => {
   if (!icon) return null;
@@ -25,8 +27,8 @@ export /**
  * @param {boolean} is_block
  * @returns {object}
  */
-const blockProps = (is_block) =>
-  is_block ? { style: { display: "block" } } : {};
+  const blockProps = (is_block) =>
+    is_block ? { style: { display: "block" } } : {};
 
 export /**
  * @param {object} props
@@ -37,23 +39,23 @@ export /**
  * @subcategory components / elements / utils
  * @namespace
  */
-const BlockSetting = ({ block, setProp }) => (
-  <div className="form-check">
-    <input
-      className="form-check-input"
-      name="block"
-      type="checkbox"
-      checked={block}
-      onChange={(e) => {
-        if (e.target) {
-          const target_value = e.target.checked;
-          setProp((prop) => (prop.block = target_value));
-        }
-      }}
-    />
-    <label className="form-check-label">Block display</label>
-  </div>
-);
+  const BlockSetting = ({ block, setProp }) => (
+    <div className="form-check">
+      <input
+        className="form-check-input"
+        name="block"
+        type="checkbox"
+        checked={block}
+        onChange={(e) => {
+          if (e.target) {
+            const target_value = e.target.checked;
+            setProp((prop) => (prop.block = target_value));
+          }
+        }}
+      />
+      <label className="form-check-label">Block display</label>
+    </div>
+  );
 
 export const BlockOrInlineSetting = ({ block, inline, textStyle, setProp }) =>
   !textStyle || !textStyle.startsWith("h") ? (
@@ -76,6 +78,18 @@ export const BlockOrInlineSetting = ({ block, inline, textStyle, setProp }) =>
     </div>
   );
 
+export const FormulaTooltip = () => {
+  const { fields } = useContext(optionsCtx);
+  console.log(fields);
+  return <Tooltip>
+    <div>Formulae in Saltcorn are JavaScript expressions based on the current database row.</div>
+    {fields ? <Fragment> Variables in scope: &nbsp;
+      {fields.map((f, ix) => <Fragment><code key={ix}>{f.name}</code>{" "}</Fragment>)}</Fragment> : null}
+
+    <a className="d-block" href="https://wiki.saltcorn.com/view/ShowPage/formulas">Wiki page on formulas</a>
+  </Tooltip>
+}
+
 export /**
  * @param {object} props
  * @param {function} props.setProp
@@ -88,81 +102,83 @@ export /**
  * @category saltcorn-builder
  * @subcategory components / elements / utils
  */
-const OrFormula = ({ setProp, isFormula, node, nodekey, children }) => {
-  const { mode } = useContext(optionsCtx);
+  const OrFormula = ({ setProp, isFormula, node, nodekey, children }) => {
+    const { mode } = useContext(optionsCtx);
 
-  /**
-   * @returns {void}
-   */
-  const switchIsFml = () => {
-    const isFmlAfter = !isFormula[nodekey];
-    setProp((prop) => {
-      prop.isFormula[nodekey] = isFmlAfter;
-      if (isFmlAfter && prop[nodekey] && prop[nodekey][0] !== '"') {
-        prop[nodekey] = `"${prop[nodekey]}"`;
-      } else if (
-        !isFmlAfter &&
-        typeof prop[nodekey] === "string" &&
-        prop[nodekey][0] === '"' &&
-        prop[nodekey][prop[nodekey].length - 1] === '"'
-      ) {
-        prop[nodekey] = prop[nodekey].substring(1, prop[nodekey].length - 1);
+    /**
+     * @returns {void}
+     */
+    const switchIsFml = () => {
+      const isFmlAfter = !isFormula[nodekey];
+      setProp((prop) => {
+        prop.isFormula[nodekey] = isFmlAfter;
+        if (isFmlAfter && prop[nodekey] && prop[nodekey][0] !== '"') {
+          prop[nodekey] = `"${prop[nodekey]}"`;
+        } else if (
+          !isFmlAfter &&
+          typeof prop[nodekey] === "string" &&
+          prop[nodekey][0] === '"' &&
+          prop[nodekey][prop[nodekey].length - 1] === '"'
+        ) {
+          prop[nodekey] = prop[nodekey].substring(1, prop[nodekey].length - 1);
+        }
+      });
+    };
+    let errorString = false;
+    if (mode === "show" && isFormula[nodekey]) {
+      try {
+        Function("return " + node[nodekey]);
+      } catch (error) {
+        errorString = error.message;
       }
-    });
-  };
-  let errorString = false;
-  if (isFormula[nodekey]) {
-    try {
-      Function("return " + node[nodekey]);
-    } catch (error) {
-      errorString = error.message;
     }
-  }
-  return mode !== "show" ? (
-    children
-  ) : (
-    <Fragment>
-      <div className="input-group  input-group-sm w-100">
-        {isFormula[nodekey] ? (
-          <input
-            type="text"
-            className="form-control text-to-display"
-            value={node[nodekey] || ""}
-            onChange={(e) => {
-              if (e.target) {
-                const target_value = e.target.value;
-                setProp((prop) => (prop[nodekey] = target_value));
-              }
-            }}
-          />
-        ) : (
-          children
-        )}
+    return mode !== "show" ? (
+      children
+    ) : (
+      <Fragment>
+        <div className="input-group  input-group-sm w-100">
+          {isFormula[nodekey] ? (
+            <input
+              type="text"
+              className="form-control text-to-display"
+              value={node[nodekey] || ""}
+              onChange={(e) => {
+                if (e.target) {
+                  const target_value = e.target.value;
+                  setProp((prop) => (prop[nodekey] = target_value));
+                }
+              }}
+            />
+          ) : (
+            children
+          )}
 
-        <button
-          className={`btn activate-formula ${
-            isFormula[nodekey] ? "btn-secondary" : "btn-outline-secondary"
-          }`}
-          title="Calculated formula"
-          type="button"
-          onClick={switchIsFml}
-        >
-          <i className="fas fa-calculator"></i>
-        </button>
-      </div>
-      {isFormula[nodekey] && (
-        <div style={{ marginTop: "-5px" }}>
-          <small className="text-muted font-monospace">FORMULA</small>
-          {errorString ? (
-            <small className="text-danger font-monospace d-block">
-              {errorString}
-            </small>
-          ) : null}
+          <button
+            className={`btn activate-formula ${isFormula[nodekey] ? "btn-secondary" : "btn-outline-secondary"
+              }`}
+            title="Calculated formula"
+            type="button"
+            onClick={switchIsFml}
+          >
+            <i className="fas fa-calculator"></i>
+          </button>
         </div>
-      )}
-    </Fragment>
-  );
-};
+        {isFormula[nodekey] && (
+          <div style={{ marginTop: "-5px" }}>
+            <small className="text-muted font-monospace">
+              FORMULA
+              <FormulaTooltip />
+            </small>
+            {errorString ? (
+              <small className="text-danger font-monospace d-block">
+                {errorString}
+              </small>
+            ) : null}
+          </div>
+        )}
+      </Fragment>
+    );
+  };
 
 export /**
  * @param {object} props
@@ -173,52 +189,15 @@ export /**
  * @category saltcorn-builder
  * @subcategory components / elements / utils
  */
-const MinRoleSetting = ({ minRole, setProp }) => {
-  const options = useContext(optionsCtx);
-  return (
-    <div>
-      <label>Minimum Role</label>
-      <select
-        className="form-control form-select"
-        value={minRole}
-        onChange={(e) => (e) => {
-          if (e.target) {
-            const target_value = e.target.value;
-            setProp((prop) => (prop.minRole = target_value));
-          }
-        }}
-      >
-        {options.roles.map((r) => (
-          <option key={r.id} value={r.id}>
-            {r.role}
-          </option>
-        ))}
-      </select>
-    </div>
-  );
-};
-
-export /**
- * @param {object} props
- * @param {string} props.minRole
- * @param {function} props.setProp
- * @returns {tr}
- * @namespace
- * @category saltcorn-builder
- * @subcategory components / elements / utils
- */
-const MinRoleSettingRow = ({ minRole, setProp }) => {
-  const options = useContext(optionsCtx);
-  return (
-    <tr>
-      <td>
+  const MinRoleSetting = ({ minRole, setProp }) => {
+    const options = useContext(optionsCtx);
+    return (
+      <div>
         <label>Minimum Role</label>
-      </td>
-      <td>
         <select
-          value={minRole}
           className="form-control form-select"
-          onChange={(e) => {
+          value={minRole}
+          onChange={(e) => (e) => {
             if (e.target) {
               const target_value = e.target.value;
               setProp((prop) => (prop.minRole = target_value));
@@ -231,10 +210,47 @@ const MinRoleSettingRow = ({ minRole, setProp }) => {
             </option>
           ))}
         </select>
-      </td>
-    </tr>
-  );
-};
+      </div>
+    );
+  };
+
+export /**
+ * @param {object} props
+ * @param {string} props.minRole
+ * @param {function} props.setProp
+ * @returns {tr}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components / elements / utils
+ */
+  const MinRoleSettingRow = ({ minRole, setProp }) => {
+    const options = useContext(optionsCtx);
+    return (
+      <tr>
+        <td>
+          <label>Minimum Role</label>
+        </td>
+        <td>
+          <select
+            value={minRole}
+            className="form-control form-select"
+            onChange={(e) => {
+              if (e.target) {
+                const target_value = e.target.value;
+                setProp((prop) => (prop.minRole = target_value));
+              }
+            }}
+          >
+            {options.roles.map((r) => (
+              <option key={r.id} value={r.id}>
+                {r.role}
+              </option>
+            ))}
+          </select>
+        </td>
+      </tr>
+    );
+  };
 
 /**
  * @param {object} props
@@ -283,14 +299,14 @@ export /**
  * @category saltcorn-builder
  * @subcategory components / elements / utils
  */
-const TextStyleSetting = ({ textStyle, setProp }) => {
-  return (
-    <div>
-      <label>Text Style</label>
-      <TextStyleSelect textStyle={textStyle} setProp={setProp} />
-    </div>
-  );
-};
+  const TextStyleSetting = ({ textStyle, setProp }) => {
+    return (
+      <div>
+        <label>Text Style</label>
+        <TextStyleSelect textStyle={textStyle} setProp={setProp} />
+      </div>
+    );
+  };
 
 export /**
  * @param {object} props
@@ -301,18 +317,18 @@ export /**
  * @category saltcorn-builder
  * @subcategory components / elements / utils
  */
-const TextStyleRow = ({ textStyle, setProp }) => {
-  return (
-    <tr>
-      <td>
-        <label>Text Style</label>
-      </td>
-      <td>
-        <TextStyleSelect textStyle={textStyle} setProp={setProp} />
-      </td>
-    </tr>
-  );
-};
+  const TextStyleRow = ({ textStyle, setProp }) => {
+    return (
+      <tr>
+        <td>
+          <label>Text Style</label>
+        </td>
+        <td>
+          <TextStyleSelect textStyle={textStyle} setProp={setProp} />
+        </td>
+      </tr>
+    );
+  };
 
 export /**
  * @param {object} props
@@ -323,36 +339,35 @@ export /**
  * @subcategory components / elements / utils
  * @namespace
  */
-const Accordion = ({ titles, children }) => {
-  const [currentTab, setCurrentTab] = useState(0);
-  return (
-    <Fragment>
-      {children.map((child, ix) => {
-        const isCurrent = ix === currentTab;
-        return (
-          <Fragment key={ix}>
-            <div
-              className={`bg-${
-                isCurrent ? "primary" : "secondary"
-              } ps-1 text-white w-100 mt-1`}
-              onClick={() => setCurrentTab(ix)}
-            >
-              <span className="w-1em">
-                {isCurrent ? (
-                  <FontAwesomeIcon icon={faChevronDown} />
-                ) : (
-                  <FontAwesomeIcon icon={faChevronRight} />
-                )}
-              </span>
-              {child.props.accordiontitle || titles[ix]}
-            </div>
-            {isCurrent ? child : null}
-          </Fragment>
-        );
-      })}
-    </Fragment>
-  );
-};
+  const Accordion = ({ titles, children }) => {
+    const [currentTab, setCurrentTab] = useState(0);
+    return (
+      <Fragment>
+        {children.map((child, ix) => {
+          const isCurrent = ix === currentTab;
+          return (
+            <Fragment key={ix}>
+              <div
+                className={`bg-${isCurrent ? "primary" : "secondary"
+                  } ps-1 text-white w-100 mt-1`}
+                onClick={() => setCurrentTab(ix)}
+              >
+                <span className="w-1em">
+                  {isCurrent ? (
+                    <FontAwesomeIcon icon={faChevronDown} />
+                  ) : (
+                    <FontAwesomeIcon icon={faChevronRight} />
+                  )}
+                </span>
+                {child.props.accordiontitle || titles[ix]}
+              </div>
+              {isCurrent ? child : null}
+            </Fragment>
+          );
+        })}
+      </Fragment>
+    );
+  };
 
 /**
  * @param {object} opts
@@ -402,23 +417,23 @@ const fetchPreview = ({ url, body, options, setPreviews, node_id, isView }) => {
  */
 export const fetchFieldPreview =
   (args = {}) =>
-  (changes = {}) => {
-    const { node_id, options, name, fieldview, setPreviews } = {
-      ...args,
-      ...changes,
-    };
-    const configuration = {
-      ...(args.configuration || {}),
-      ...(changes.configuration || {}),
+    (changes = {}) => {
+      const { node_id, options, name, fieldview, setPreviews } = {
+        ...args,
+        ...changes,
+      };
+      const configuration = {
+        ...(args.configuration || {}),
+        ...(changes.configuration || {}),
+      };
+      fetchPreview({
+        options,
+        node_id,
+        setPreviews,
+        url: `/field/preview/${options.tableName}/${name}/${fieldview}`,
+        body: { configuration },
+      });
     };
-    fetchPreview({
-      options,
-      node_id,
-      setPreviews,
-      url: `/field/preview/${options.tableName}/${name}/${fieldview}`,
-      body: { configuration },
-    });
-  };
 
 /**
  * @function
@@ -427,30 +442,30 @@ export const fetchFieldPreview =
  */
 export const fetchViewPreview =
   (args = {}) =>
-  (changes = {}) => {
-    const { node_id, options, view, setPreviews, configuration } = {
-      ...args,
-      ...changes,
-    };
-    let viewname,
-      body = configuration ? { ...configuration } : {};
-    if (view.includes(":")) {
-      const [reltype, rest] = view.split(":");
-      const [vnm] = rest.split(".");
-      viewname = vnm;
-      body.reltype = reltype;
-      body.path = rest;
-    } else viewname = view;
+    (changes = {}) => {
+      const { node_id, options, view, setPreviews, configuration } = {
+        ...args,
+        ...changes,
+      };
+      let viewname,
+        body = configuration ? { ...configuration } : {};
+      if (view.includes(":")) {
+        const [reltype, rest] = view.split(":");
+        const [vnm] = rest.split(".");
+        viewname = vnm;
+        body.reltype = reltype;
+        body.path = rest;
+      } else viewname = view;
 
-    fetchPreview({
-      options,
-      node_id,
-      setPreviews,
-      url: `/view/${viewname}/preview`,
-      body,
-      isView: true,
-    });
-  };
+      fetchPreview({
+        options,
+        node_id,
+        setPreviews,
+        url: `/view/${viewname}/preview`,
+        body,
+        isView: true,
+      });
+    };
 
 export /**
  * @param {object} props
@@ -462,16 +477,16 @@ export /**
  * @subcategory components / elements / utils
  * @namespace
  */
-const SelectUnits = ({ vert, autoable, ...props }) => (
-  <select {...props}>
-    <option>px</option>
-    <option>%</option>
-    <option>{vert ? "vh" : "vw"}</option>
-    <option>em</option>
-    <option>rem</option>
-    {autoable && <option>auto</option>}
-  </select>
-);
+  const SelectUnits = ({ vert, autoable, ...props }) => (
+    <select {...props}>
+      <option>px</option>
+      <option>%</option>
+      <option>{vert ? "vh" : "vw"}</option>
+      <option>em</option>
+      <option>rem</option>
+      {autoable && <option>auto</option>}
+    </select>
+  );
 
 /**
  * @function
@@ -579,36 +594,36 @@ export /**
  * @subcategory components / elements / utils
  * @namespace
  */
-const ConfigForm = ({ fields, configuration, setProp, node, onChange }) => (
-  <div>
-    {fields.map((f, ix) => {
-      if (f.showIf && configuration) {
-        let noshow = false;
-        Object.entries(f.showIf).forEach(([nm, value]) => {
-          if (Array.isArray(value))
-            noshow = noshow || value.includes(configuration[nm]);
-          else noshow = noshow || value !== configuration[nm];
-        });
-        if (noshow) return null;
-      }
-      return (
-        <div key={ix}>
-          {!isCheckbox(f) ? <label>{f.label || f.name}</label> : null}
-          <ConfigField
-            field={f}
-            configuration={configuration}
-            setProp={setProp}
-            onChange={onChange}
-          />
-          {f.sublabel ? (
-            <i dangerouslySetInnerHTML={{ __html: f.sublabel }}></i>
-          ) : null}
-        </div>
-      );
-    })}
-    <br />
-  </div>
-);
+  const ConfigForm = ({ fields, configuration, setProp, node, onChange }) => (
+    <div>
+      {fields.map((f, ix) => {
+        if (f.showIf && configuration) {
+          let noshow = false;
+          Object.entries(f.showIf).forEach(([nm, value]) => {
+            if (Array.isArray(value))
+              noshow = noshow || value.includes(configuration[nm]);
+            else noshow = noshow || value !== configuration[nm];
+          });
+          if (noshow) return null;
+        }
+        return (
+          <div key={ix}>
+            {!isCheckbox(f) ? <label>{f.label || f.name}</label> : null}
+            <ConfigField
+              field={f}
+              configuration={configuration}
+              setProp={setProp}
+              onChange={onChange}
+            />
+            {f.sublabel ? (
+              <i dangerouslySetInnerHTML={{ __html: f.sublabel }}></i>
+            ) : null}
+          </div>
+        );
+      })}
+      <br />
+    </div>
+  );
 
 /**
  * @param {object|undefined} x
@@ -630,245 +645,243 @@ export /**
  * @subcategory components / elements / utils
  * @namespace
  */
-const ConfigField = ({
-  field,
-  configuration,
-  setProp,
-  onChange,
-  props,
-  isStyle,
-}) => {
-  /**
-   * @param {object} v
-   * @returns {void}
-   */
-  const options = useContext(optionsCtx);
+  const ConfigField = ({
+    field,
+    configuration,
+    setProp,
+    onChange,
+    props,
+    isStyle,
+  }) => {
+    /**
+     * @param {object} v
+     * @returns {void}
+     */
+    const options = useContext(optionsCtx);
 
-  const myOnChange = (v) => {
-    setProp((prop) => {
-      if (configuration) {
-        if (!prop.configuration) prop.configuration = {};
-        prop.configuration[field.name] = v;
-      } else if (isStyle) {
-        if (!prop.style) prop.style = {};
-        prop.style[field.name] = v;
-      } else prop[field.name] = v;
-    });
-    onChange && onChange(field.name, v);
-  };
-  const value = or_if_undef(
-    configuration
-      ? configuration[field.name]
-      : isStyle
-      ? props.style[field.name]
-      : props[field.name],
-    field.default
-  );
-  if (field.input_type === "fromtype") field.input_type = null;
-  if (field.type && field.type.name === "String" && field.attributes.options) {
-    field.input_type = "select";
-    field.options =
-      typeof field.attributes.options === "string"
-        ? field.attributes.options.split(",").map((s) => s.trim())
-        : field.attributes.options;
-    if (!field.required && field.options) field.options.unshift("");
-  }
-  const dispatch = {
-    String() {
-      if (field.attributes?.options) {
-        const options =
-          typeof field.attributes.options === "string"
-            ? field.attributes.options.split(",").map((s) => s.trim())
-            : field.attributes.options;
-        return (
-          <select
-            className="form-control form-select"
-            value={value || ""}
-            onChange={(e) => e.target && myOnChange(e.target.value)}
-          >
-            {options.map((o, ix) => (
-              <option
-                key={ix}
-                value={typeof o === "string" ? o : o.value || o.name}
-              >
-                {typeof o === "string" ? o : o.label}
-              </option>
-            ))}
-          </select>
-        );
-      } else
-        return (
+    const myOnChange = (v) => {
+      setProp((prop) => {
+        if (configuration) {
+          if (!prop.configuration) prop.configuration = {};
+          prop.configuration[field.name] = v;
+        } else if (isStyle) {
+          if (!prop.style) prop.style = {};
+          prop.style[field.name] = v;
+        } else prop[field.name] = v;
+      });
+      onChange && onChange(field.name, v);
+    };
+    const value = or_if_undef(
+      configuration
+        ? configuration[field.name]
+        : isStyle
+          ? props.style[field.name]
+          : props[field.name],
+      field.default
+    );
+    if (field.input_type === "fromtype") field.input_type = null;
+    if (field.type && field.type.name === "String" && field.attributes.options) {
+      field.input_type = "select";
+      field.options =
+        typeof field.attributes.options === "string"
+          ? field.attributes.options.split(",").map((s) => s.trim())
+          : field.attributes.options;
+      if (!field.required && field.options) field.options.unshift("");
+    }
+    const dispatch = {
+      String() {
+        if (field.attributes?.options) {
+          const options =
+            typeof field.attributes.options === "string"
+              ? field.attributes.options.split(",").map((s) => s.trim())
+              : field.attributes.options;
+          return (
+            <select
+              className="form-control form-select"
+              value={value || ""}
+              onChange={(e) => e.target && myOnChange(e.target.value)}
+            >
+              {options.map((o, ix) => (
+                <option
+                  key={ix}
+                  value={typeof o === "string" ? o : o.value || o.name}
+                >
+                  {typeof o === "string" ? o : o.label}
+                </option>
+              ))}
+            </select>
+          );
+        } else
+          return (
+            <input
+              type="text"
+              className="form-control"
+              value={value || ""}
+              onChange={(e) => e.target && myOnChange(e.target.value)}
+            />
+          );
+      },
+      Font: () => (
+        <select
+          className="form-control form-select"
+          value={value || ""}
+          onChange={(e) => e.target && myOnChange(e.target.value)}
+        >
+          <option value={""}></option>
+          {Object.entries(options.fonts || {}).map(([nm, ff], ix) => (
+            <option key={ix} value={ff}>
+              {nm}
+            </option>
+          ))}
+        </select>
+      ),
+      Integer: () => (
+        <input
+          type="number"
+          className="form-control"
+          step={field.step || 1}
+          min={field.min}
+          max={field.max}
+          value={value || ""}
+          onChange={(e) => e.target && myOnChange(e.target.value)}
+        />
+      ),
+      Float: () => (
+        <input
+          type="number"
+          className="form-control"
+          value={value || ""}
+          step={0.01}
+          onChange={(e) => e.target && myOnChange(e.target.value)}
+        />
+      ),
+      Color: () => <ColorInput value={value} onChange={(c) => myOnChange(c)} />,
+      Bool: () => (
+        <div className="form-check">
           <input
-            type="text"
-            className="form-control"
-            value={value || ""}
-            onChange={(e) => e.target && myOnChange(e.target.value)}
+            type="checkbox"
+            className="form-check-input"
+            checked={value}
+            onChange={(e) => e.target && myOnChange(e.target.checked)}
           />
-        );
-    },
-    Font: () => (
-      <select
-        className="form-control form-select"
-        value={value || ""}
-        onChange={(e) => e.target && myOnChange(e.target.value)}
-      >
-        <option value={""}></option>
-        {Object.entries(options.fonts || {}).map(([nm, ff], ix) => (
-          <option key={ix} value={ff}>
-            {nm}
-          </option>
-        ))}
-      </select>
-    ),
-    Integer: () => (
-      <input
-        type="number"
-        className="form-control"
-        step={field.step || 1}
-        min={field.min}
-        max={field.max}
-        value={value || ""}
-        onChange={(e) => e.target && myOnChange(e.target.value)}
-      />
-    ),
-    Float: () => (
-      <input
-        type="number"
-        className="form-control"
-        value={value || ""}
-        step={0.01}
-        onChange={(e) => e.target && myOnChange(e.target.value)}
-      />
-    ),
-    Color: () => <ColorInput value={value} onChange={(c) => myOnChange(c)} />,
-    Bool: () => (
-      <div className="form-check">
-        <input
-          type="checkbox"
-          className="form-check-input"
-          checked={value}
-          onChange={(e) => e.target && myOnChange(e.target.checked)}
+          <label className="form-check-label">{field.label}</label>
+        </div>
+      ),
+      textarea: () => (
+        <textarea
+          rows="6"
+          type="text"
+          className="form-control"
+          value={value}
+          onChange={(e) => e.target && myOnChange(e.target.value)}
         />
-        <label className="form-check-label">{field.label}</label>
-      </div>
-    ),
-    textarea: () => (
-      <textarea
-        rows="6"
-        type="text"
-        className="form-control"
-        value={value}
-        onChange={(e) => e.target && myOnChange(e.target.value)}
-      />
-    ),
-    code: () => (
-      <textarea
-        rows="6"
-        type="text"
-        className="form-control"
-        value={value}
-        onChange={(e) => e.target && myOnChange(e.target.value)}
-      />
-    ),
-    select: () => (
-      <select
-        className="form-control form-select"
-        value={value || ""}
-        onChange={(e) => e.target && myOnChange(e.target.value)}
-      >
-        {field.options.map((o, ix) => (
-          <option key={ix}>{o}</option>
-        ))}
-      </select>
-    ),
-    btn_select: () => (
-      <div className="btn-group w-100" role="group">
-        {field.options.map((o, ix) => (
-          <button
-            key={ix}
-            title={o.title || o.value}
-            type="button"
-            style={{ width: `${Math.floor(100 / field.options.length)}%` }}
-            className={`btn btn-sm btn-${
-              value !== o.value ? "outline-" : ""
-            }secondary ${field.btnClass || ""}`}
-            onClick={() => myOnChange(o.value)}
-          >
-            {o.label}
-          </button>
-        ))}
-      </div>
-    ),
-    DimUnits: () => {
-      let styleVal, styleDim;
-      if (isStyle && value === "auto") {
-        styleVal = "";
-        styleDim = "auto";
-      } else if (isStyle && value && typeof value === "string") {
-        const matches = value.match(/^([0-9]+\.?[0-9]*)(.*)/);
-        if (matches) {
-          styleVal = matches[1];
-          styleDim = matches[2];
+      ),
+      code: () => (
+        <textarea
+          rows="6"
+          type="text"
+          className="form-control"
+          value={value}
+          onChange={(e) => e.target && myOnChange(e.target.value)}
+        />
+      ),
+      select: () => (
+        <select
+          className="form-control form-select"
+          value={value || ""}
+          onChange={(e) => e.target && myOnChange(e.target.value)}
+        >
+          {field.options.map((o, ix) => (
+            <option key={ix}>{o}</option>
+          ))}
+        </select>
+      ),
+      btn_select: () => (
+        <div className="btn-group w-100" role="group">
+          {field.options.map((o, ix) => (
+            <button
+              key={ix}
+              title={o.title || o.value}
+              type="button"
+              style={{ width: `${Math.floor(100 / field.options.length)}%` }}
+              className={`btn btn-sm btn-${value !== o.value ? "outline-" : ""
+                }secondary ${field.btnClass || ""}`}
+              onClick={() => myOnChange(o.value)}
+            >
+              {o.label}
+            </button>
+          ))}
+        </div>
+      ),
+      DimUnits: () => {
+        let styleVal, styleDim;
+        if (isStyle && value === "auto") {
+          styleVal = "";
+          styleDim = "auto";
+        } else if (isStyle && value && typeof value === "string") {
+          const matches = value.match(/^([0-9]+\.?[0-9]*)(.*)/);
+          if (matches) {
+            styleVal = matches[1];
+            styleDim = matches[2];
+          }
         }
-      }
-      return (
-        <Fragment>
-          {styleDim !== "auto" && (
-            <input
-              type="number"
-              value={(isStyle ? styleVal : value) || ""}
-              className="w-50 form-control-sm d-inline dimunit"
-              disabled={field.autoable && styleDim === "auto"}
-              onChange={(e) =>
-                e?.target &&
-                myOnChange(
-                  isStyle
-                    ? `${e.target.value}${styleDim || "px"}`
-                    : e.target.value
-                )
-              }
-            />
-          )}
-          <SelectUnits
-            value={or_if_undef(
-              configuration
-                ? configuration[field.name + "Unit"]
-                : isStyle
-                ? styleDim
-                : props[field.name + "Unit"],
-              "px"
+        return (
+          <Fragment>
+            {styleDim !== "auto" && (
+              <input
+                type="number"
+                value={(isStyle ? styleVal : value) || ""}
+                className="w-50 form-control-sm d-inline dimunit"
+                disabled={field.autoable && styleDim === "auto"}
+                onChange={(e) =>
+                  e?.target &&
+                  myOnChange(
+                    isStyle
+                      ? `${e.target.value}${styleDim || "px"}`
+                      : e.target.value
+                  )
+                }
+              />
             )}
-            autoable={field.autoable}
-            className={`w-${
-              styleDim === "auto" ? 100 : 50
-            } form-control-sm d-inline dimunit`}
-            vert={true}
-            onChange={(e) => {
-              if (!e.target) return;
-              const target_value = e.target.value;
-              setProp((prop) => {
-                const myStyleVal =
-                  target_value === "auto" && field.autoable && isStyle
-                    ? ""
-                    : styleVal;
-                if (configuration)
-                  prop.configuration[field.name + "Unit"] = target_value;
-                else if (isStyle) {
-                  prop.style[field.name] = `${or_if_undef(
-                    myStyleVal,
-                    0
-                  )}${target_value}`;
-                } else prop[field.name + "Unit"] = target_value;
-              });
-            }}
-          />
-        </Fragment>
-      );
-    },
+            <SelectUnits
+              value={or_if_undef(
+                configuration
+                  ? configuration[field.name + "Unit"]
+                  : isStyle
+                    ? styleDim
+                    : props[field.name + "Unit"],
+                "px"
+              )}
+              autoable={field.autoable}
+              className={`w-${styleDim === "auto" ? 100 : 50
+                } form-control-sm d-inline dimunit`}
+              vert={true}
+              onChange={(e) => {
+                if (!e.target) return;
+                const target_value = e.target.value;
+                setProp((prop) => {
+                  const myStyleVal =
+                    target_value === "auto" && field.autoable && isStyle
+                      ? ""
+                      : styleVal;
+                  if (configuration)
+                    prop.configuration[field.name + "Unit"] = target_value;
+                  else if (isStyle) {
+                    prop.style[field.name] = `${or_if_undef(
+                      myStyleVal,
+                      0
+                    )}${target_value}`;
+                  } else prop[field.name + "Unit"] = target_value;
+                });
+              }}
+            />
+          </Fragment>
+        );
+      },
+    };
+    const f = dispatch[field.input_type || field.type.name || field.type];
+    return f ? f() : null;
   };
-  const f = dispatch[field.input_type || field.type.name || field.type];
-  return f ? f() : null;
-};
 
 export /**
  * @param {object[]} fields
@@ -877,30 +890,30 @@ export /**
  * @namespace
  * @returns {table}
  */
-const SettingsFromFields = (fields) => () => {
-  const node = useNode((node) => {
-    const ps = {};
-    fields.forEach((f) => {
-      ps[f.name] = node.data.props[f.name];
+  const SettingsFromFields = (fields) => () => {
+    const node = useNode((node) => {
+      const ps = {};
+      fields.forEach((f) => {
+        ps[f.name] = node.data.props[f.name];
+      });
+      if (fields.some((f) => f.canBeFormula))
+        ps.isFormula = node.data.props.isFormula;
+      return ps;
     });
-    if (fields.some((f) => f.canBeFormula))
-      ps.isFormula = node.data.props.isFormula;
-    return ps;
-  });
-  const {
-    actions: { setProp },
-  } = node;
+    const {
+      actions: { setProp },
+    } = node;
 
-  return (
-    <table className="w-100">
-      <tbody>
-        {fields.map((f, ix) => (
-          <SettingsRow field={f} key={ix} node={node} setProp={setProp} />
-        ))}
-      </tbody>
-    </table>
-  );
-};
+    return (
+      <table className="w-100">
+        <tbody>
+          {fields.map((f, ix) => (
+            <SettingsRow field={f} key={ix} node={node} setProp={setProp} />
+          ))}
+        </tbody>
+      </table>
+    );
+  };
 
 export /**
  * @param {object} props
@@ -910,11 +923,11 @@ export /**
  * @subcategory components / elements / utils
  * @namespace
  */
-const SettingsSectionHeaderRow = ({ title }) => (
-  <tr>
-    <th colSpan="2">{title}</th>
-  </tr>
-);
+  const SettingsSectionHeaderRow = ({ title }) => (
+    <tr>
+      <th colSpan="2">{title}</th>
+    </tr>
+  );
 
 export /**
  * @param {object} props
@@ -928,49 +941,49 @@ export /**
  * @subcategory components / elements / utils
  * @namespace
  */
-const SettingsRow = ({ field, node, setProp, onChange, isStyle }) => {
-  const fullWidth = ["String", "Bool", "textarea"].includes(field.type);
-  const needLabel = field.type !== "Bool";
-  const inner = field.canBeFormula ? (
-    <OrFormula
-      nodekey={field.name}
-      isFormula={node.isFormula}
-      {...{ setProp, node }}
-    >
+  const SettingsRow = ({ field, node, setProp, onChange, isStyle }) => {
+    const fullWidth = ["String", "Bool", "textarea"].includes(field.type);
+    const needLabel = field.type !== "Bool";
+    const inner = field.canBeFormula ? (
+      <OrFormula
+        nodekey={field.name}
+        isFormula={node.isFormula}
+        {...{ setProp, node }}
+      >
+        <ConfigField
+          field={field}
+          props={node}
+          setProp={setProp}
+          onChange={onChange}
+        />
+      </OrFormula>
+    ) : (
       <ConfigField
         field={field}
         props={node}
         setProp={setProp}
         onChange={onChange}
+        isStyle={isStyle}
       />
-    </OrFormula>
-  ) : (
-    <ConfigField
-      field={field}
-      props={node}
-      setProp={setProp}
-      onChange={onChange}
-      isStyle={isStyle}
-    />
-  );
-  return (
-    <tr>
-      {fullWidth ? (
-        <td colSpan="2">
-          {needLabel && <label>{field.label}</label>}
-          {inner}
-        </td>
-      ) : (
-        <Fragment>
-          <td>
-            <label>{field.label}</label>
+    );
+    return (
+      <tr>
+        {fullWidth ? (
+          <td colSpan="2">
+            {needLabel && <label>{field.label}</label>}
+            {inner}
           </td>
-          <td>{inner}</td>
-        </Fragment>
-      )}
-    </tr>
-  );
-};
+        ) : (
+          <Fragment>
+            <td>
+              <label>{field.label}</label>
+            </td>
+            <td>{inner}</td>
+          </Fragment>
+        )}
+      </tr>
+    );
+  };
 
 /**
  * @category saltcorn-builder
@@ -1047,83 +1060,83 @@ export /**
  * @subcategory components / elements / utils
  * @namespace
  */
-const ButtonOrLinkSettingsRows = ({
-  setProp,
-  btnClass = null,
-  keyPrefix = "",
-  values,
-  linkFirst = false,
-}) => {
-  const setAProp = setAPropGen(setProp);
-  const addBtnClass = (s) => (btnClass ? `${btnClass} ${s}` : s);
-  return [
-    <tr key="btnstyle">
-      <td>
-        <label>Style</label>
-      </td>
-      <td>
-        <select
-          className="form-control form-select"
-          value={values[keyPrefix + "style"]}
-          onChange={setAProp(keyPrefix + "style")}
-        >
-          {linkFirst ? (
-            <option value={addBtnClass("btn-link")}>Link</option>
-          ) : null}
-          <option value={addBtnClass("btn-primary")}>Primary button</option>
-          <option value={addBtnClass("btn-secondary")}>Secondary button</option>
-          <option value={addBtnClass("btn-success")}>Success button</option>
-          <option value={addBtnClass("btn-danger")}>Danger button</option>
-          <option value={addBtnClass("btn-outline-primary")}>
-            Primary outline button
-          </option>
-          <option value={addBtnClass("btn-outline-secondary")}>
-            Secondary outline button
-          </option>
-          <option value={addBtnClass("btn-custom-color")}>
-            Button custom color
-          </option>
-          {!linkFirst ? (
-            <option value={addBtnClass("btn-link")}>Link</option>
-          ) : null}
-        </select>
-      </td>
-    </tr>,
-    <tr key="btnsz">
-      <td>
-        <label>Size</label>
-      </td>
-      <td>
-        <select
-          className="form-control form-select"
-          value={values[keyPrefix + "size"]}
-          onChange={setAProp(keyPrefix + "size")}
-        >
-          <option value="">Standard</option>
-          <option value="btn-lg">Large</option>
-          <option value="btn-sm">Small</option>
-          <option value="btn-block">Block</option>
-          <option value="btn-block btn-lg">Large block</option>
-        </select>
-      </td>
-    </tr>,
-    <tr key="btnicon">
-      <td>
-        <label>Icon</label>
-      </td>
-      <td>
-        <FontIconPicker
-          value={values[keyPrefix + "icon"]}
-          onChange={(value) =>
-            setProp((prop) => (prop[keyPrefix + "icon"] = value))
-          }
-          isMulti={false}
-          icons={faIcons}
-        />
-      </td>
-    </tr>,
-    ...(values[keyPrefix + "style"] === addBtnClass("btn-custom-color")
-      ? [
+  const ButtonOrLinkSettingsRows = ({
+    setProp,
+    btnClass = null,
+    keyPrefix = "",
+    values,
+    linkFirst = false,
+  }) => {
+    const setAProp = setAPropGen(setProp);
+    const addBtnClass = (s) => (btnClass ? `${btnClass} ${s}` : s);
+    return [
+      <tr key="btnstyle">
+        <td>
+          <label>Style</label>
+        </td>
+        <td>
+          <select
+            className="form-control form-select"
+            value={values[keyPrefix + "style"]}
+            onChange={setAProp(keyPrefix + "style")}
+          >
+            {linkFirst ? (
+              <option value={addBtnClass("btn-link")}>Link</option>
+            ) : null}
+            <option value={addBtnClass("btn-primary")}>Primary button</option>
+            <option value={addBtnClass("btn-secondary")}>Secondary button</option>
+            <option value={addBtnClass("btn-success")}>Success button</option>
+            <option value={addBtnClass("btn-danger")}>Danger button</option>
+            <option value={addBtnClass("btn-outline-primary")}>
+              Primary outline button
+            </option>
+            <option value={addBtnClass("btn-outline-secondary")}>
+              Secondary outline button
+            </option>
+            <option value={addBtnClass("btn-custom-color")}>
+              Button custom color
+            </option>
+            {!linkFirst ? (
+              <option value={addBtnClass("btn-link")}>Link</option>
+            ) : null}
+          </select>
+        </td>
+      </tr>,
+      <tr key="btnsz">
+        <td>
+          <label>Size</label>
+        </td>
+        <td>
+          <select
+            className="form-control form-select"
+            value={values[keyPrefix + "size"]}
+            onChange={setAProp(keyPrefix + "size")}
+          >
+            <option value="">Standard</option>
+            <option value="btn-lg">Large</option>
+            <option value="btn-sm">Small</option>
+            <option value="btn-block">Block</option>
+            <option value="btn-block btn-lg">Large block</option>
+          </select>
+        </td>
+      </tr>,
+      <tr key="btnicon">
+        <td>
+          <label>Icon</label>
+        </td>
+        <td>
+          <FontIconPicker
+            value={values[keyPrefix + "icon"]}
+            onChange={(value) =>
+              setProp((prop) => (prop[keyPrefix + "icon"] = value))
+            }
+            isMulti={false}
+            icons={faIcons}
+          />
+        </td>
+      </tr>,
+      ...(values[keyPrefix + "style"] === addBtnClass("btn-custom-color")
+        ? [
           <tr key="btnbgcol">
             <td>
               <label>Background</label>
@@ -1164,9 +1177,9 @@ const ButtonOrLinkSettingsRows = ({
             </td>
           </tr>,
         ]
-      : []),
-  ];
-};
+        : []),
+    ];
+  };
 
 /**
  * @function
@@ -1227,10 +1240,21 @@ export const isBlock = (block, inline, textStyle) =>
 
 export const setAPropGen =
   (setProp) =>
-  (key, opts = {}) =>
-  (e) => {
-    if (e.target) {
-      const target_value = opts?.checked ? e.target.checked : e.target.value;
-      setProp((prop) => (prop[key] = target_value));
-    }
-  };
+    (key, opts = {}) =>
+      (e) => {
+        if (e.target) {
+          const target_value = opts?.checked ? e.target.checked : e.target.value;
+          setProp((prop) => (prop[key] = target_value));
+        }
+      };
+
+const Tooltip = ({ children }) => {
+  const [visible, setVisible] = useState(false);
+  const show = () => setVisible(true);
+  const hide = () => setVisible(false);
+  return <Tippy content={children} visible={visible} onClickOutside={hide} interactive={true}>
+    <span
+      onClick={visible ? hide : show} className="ms-1"
+    ><FontAwesomeIcon icon={faInfoCircle} /></span>
+  </Tippy>
+}