@saltcorn/builder 0.8.0-beta.4 → 0.8.0

package/src/components/elements/utils.js

@@ -3,20 +3,20 @@
  * @module components/elements/utils
  * @subcategory components / elements
  */
-
+/* globals $, _sc_globalCsrf*/
 import React, { Fragment, useContext, useState } from "react";
 import optionsCtx from "../context";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faChevronDown,
   faChevronRight,
-  faInfoCircle
+  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';
+import Tippy from "@tippyjs/react";
 
 export const DynamicFontAwesomeIcon = ({ icon, className }) => {
   if (!icon) return null;
@@ -27,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
@@ -39,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") ? (
@@ -80,14 +80,33 @@ export const BlockOrInlineSetting = ({ block, inline, textStyle, setProp }) =>
 
 export const FormulaTooltip = () => {
   const { fields } = useContext(optionsCtx);
-  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 key={ix}><code>{f.name}</code>{" "}</Fragment>)}</Fragment> : null}
+  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 key={ix}>
+              <code>{f.name}</code>{" "}
+            </Fragment>
+          ))}
+        </Fragment>
+      ) : null}
 
-    <a className="d-block" href="https://wiki.saltcorn.com/view/ShowPage/formulas">Wiki page on formulas</a>
-  </Tooltip>
-}
+      <a
+        className="d-block"
+        href="https://wiki.saltcorn.com/view/ShowPage/formulas"
+      >
+        Wiki page on formulas
+      </a>
+    </Tooltip>
+  );
+};
 
 export /**
  * @param {object} props
@@ -101,83 +120,84 @@ 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);
-        }
-      });
-    };
-    let errorString = false;
-    if (mode === "show" && isFormula[nodekey]) {
-      try {
-        Function("return " + node[nodekey]);
-      } catch (error) {
-        errorString = error.message;
+  /**
+   * @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;
     }
-    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
-              <FormulaTooltip />
+        <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
+            <FormulaTooltip />
+          </small>
+          {errorString ? (
+            <small className="text-danger font-monospace d-block">
+              {errorString}
             </small>
-            {errorString ? (
-              <small className="text-danger font-monospace d-block">
-                {errorString}
-              </small>
-            ) : null}
-          </div>
-        )}
-      </Fragment>
-    );
-  };
+          ) : null}
+        </div>
+      )}
+    </Fragment>
+  );
+};
 
 export /**
  * @param {object} props
@@ -188,15 +208,52 @@ export /**
  * @category saltcorn-builder
  * @subcategory components / elements / utils
  */
-  const MinRoleSetting = ({ minRole, setProp }) => {
-    const options = useContext(optionsCtx);
-    return (
-      <div>
+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>
         <label>Minimum Role</label>
+      </td>
+      <td>
         <select
-          className="form-control form-select"
           value={minRole}
-          onChange={(e) => (e) => {
+          className="form-control form-select"
+          onChange={(e) => {
             if (e.target) {
               const target_value = e.target.value;
               setProp((prop) => (prop.minRole = target_value));
@@ -209,47 +266,10 @@ export /**
             </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>
-          <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>
-    );
-  };
+      </td>
+    </tr>
+  );
+};
 
 /**
  * @param {object} props
@@ -298,14 +318,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
@@ -316,18 +336,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
@@ -338,35 +358,36 @@ 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
@@ -416,23 +437,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 || {}),
-      };
-      fetchPreview({
-        options,
-        node_id,
-        setPreviews,
-        url: `/field/preview/${options.tableName}/${name}/${fieldview}`,
-        body: { 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 },
+    });
+  };
 
 /**
  * @function
@@ -441,30 +462,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;
-
-      fetchPreview({
-        options,
-        node_id,
-        setPreviews,
-        url: `/view/${viewname}/preview`,
-        body,
-        isView: true,
-      });
+  (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,
+    });
+  };
 
 export /**
  * @param {object} props
@@ -476,16 +497,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
@@ -593,36 +614,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
@@ -644,246 +665,248 @@ 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)}
-              onBlur={(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)}
-          onBlur={(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">
+  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)}
+            onBlur={(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="checkbox"
-            className="form-check-input"
-            checked={value}
-            onChange={(e) => e.target && myOnChange(e.target.checked)}
+            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)}
+        );
+    },
+    Font: () => (
+      <select
+        className="form-control form-select"
+        value={value || ""}
+        onChange={(e) => e.target && myOnChange(e.target.value)}
+        onBlur={(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)}
         />
-      ),
-      select: () => (
-        <select
-          className="form-control form-select"
-          value={value || ""}
-          onChange={(e) => e.target && myOnChange(e.target.value)}
-          onBlur={(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];
-          }
+        <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)}
+        onBlur={(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"
-              )}
-              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;
-                });
-              }}
+      }
+      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
+                )
+              }
             />
-          </Fragment>
-        );
-      },
-    };
-    const f = dispatch[field.input_type || field.type.name || field.type];
-    return f ? f() : null;
+          )}
+          <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;
+};
 
 export /**
  * @param {object[]} fields
@@ -892,30 +915,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];
-      });
-      if (fields.some((f) => f.canBeFormula))
-        ps.isFormula = node.data.props.isFormula;
-      return ps;
+const SettingsFromFields = (fields) => () => {
+  const node = useNode((node) => {
+    const ps = {};
+    fields.forEach((f) => {
+      ps[f.name] = node.data.props[f.name];
     });
-    const {
-      actions: { setProp },
-    } = node;
+    if (fields.some((f) => f.canBeFormula))
+      ps.isFormula = node.data.props.isFormula;
+    return ps;
+  });
+  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
@@ -925,11 +948,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
@@ -943,49 +966,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 }}
-      >
-        <ConfigField
-          field={field}
-          props={node}
-          setProp={setProp}
-          onChange={onChange}
-        />
-      </OrFormula>
-    ) : (
+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}
-        isStyle={isStyle}
       />
-    );
-    return (
-      <tr>
-        {fullWidth ? (
-          <td colSpan="2">
-            {needLabel && <label>{field.label}</label>}
-            {inner}
+    </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>
           </td>
-        ) : (
-          <Fragment>
-            <td>
-              <label>{field.label}</label>
-            </td>
-            <td>{inner}</td>
-          </Fragment>
-        )}
-      </tr>
-    );
-  };
+          <td>{inner}</td>
+        </Fragment>
+      )}
+    </tr>
+  );
+};
 
 /**
  * @category saltcorn-builder
@@ -1062,83 +1085,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>
@@ -1179,9 +1202,9 @@ export /**
             </td>
           </tr>,
         ]
-        : []),
-    ];
-  };
+      : []),
+  ];
+};
 
 /**
  * @function
@@ -1242,21 +1265,28 @@ 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>
-}
+  return (
+    <Tippy
+      content={children}
+      visible={visible}
+      onClickOutside={hide}
+      interactive={true}
+    >
+      <span onClick={visible ? hide : show} className="ms-1">
+        <FontAwesomeIcon icon={faInfoCircle} />
+      </span>
+    </Tippy>
+  );
+};