@saltcorn/builder 1.0.0 → 1.1.0-beta.1

package/src/components/elements/Text.js

@@ -23,7 +23,6 @@ import ContentEditable from "react-contenteditable";
 import optionsCtx from "../context";
 import CKEditor from "ckeditor4-react";
 import FontIconPicker from "@fonticonpicker/react-fonticonpicker";
-import faIcons from "./faicons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import fas from "@fortawesome/free-solid-svg-icons";
 import far from "@fortawesome/free-regular-svg-icons";
@@ -104,9 +103,9 @@ const Text = ({
     <div
       className={`${
         isBlock(block, inline, textStyle) ? "d-block" : "d-inline-block"
-      } ${textStyle} is-text ${isFormula.text ? "font-monospace" : ""} ${
-        selected ? "selected-node" : ""
-      }`}
+      } ${Array.isArray(textStyle) ? textStyle.join(" ") : textStyle} is-text ${
+        isFormula.text ? "font-monospace" : ""
+      } ${selected ? "selected-node" : ""}`}
       ref={(dom) => connect(drag(dom))}
       onClick={(e) => selected && setEditable(true)}
       style={{
@@ -177,7 +176,7 @@ const TextSettings = () => {
     font,
     style,
   } = node;
-  const { mode, fields } = useContext(optionsCtx);
+  const { mode, fields, icons } = useContext(optionsCtx);
   const setAProp = setAPropGen(setProp);
   const allowFormula = mode === "show" || mode === "list";
 
@@ -251,7 +250,7 @@ const TextSettings = () => {
               <FontIconPicker
                 className="w-100"
                 value={icon}
-                icons={faIcons}
+                icons={icons}
                 onChange={(value) => setProp((prop) => (prop.icon = value))}
                 isMulti={false}
               />

package/src/components/elements/ToggleFilter.js

@@ -90,7 +90,7 @@ const ToggleFilterSettings = () => {
           <td>
             <select
               value={name}
-              className="form-control form-select"
+              className="field form-control form-select"
               onChange={(e) => {
                 if (e?.target) {
                   if (!e.target) return;

package/src/components/elements/ViewLink.js

@@ -331,6 +331,7 @@ const ViewLinkSettings = () => {
             linkFirst={true}
             linkIsBlank={true}
             allowRunOnLoad={false}
+            faIcons={options.icons}
           />
         </tbody>
       </table>

package/src/components/elements/utils.js

@@ -12,11 +12,15 @@ import {
   faChevronRight,
   faInfoCircle,
   faQuestionCircle,
+  faBold,
+  faItalic,
+  faFont,
+  faCommentSlash,
+  faUnderline,
+  faTerminal,
 } 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 { RelationType } from "@saltcorn/common-code";
 import Select from "react-select";
@@ -61,7 +65,8 @@ const BlockSetting = ({ block, setProp }) => (
 );
 
 export const BlockOrInlineSetting = ({ block, inline, textStyle, setProp }) =>
-  !textStyle || !textStyle.startsWith("h") ? (
+  !textStyle ||
+  !textStyleToArray(textStyle).some((ts) => ts && ts.startsWith("h")) ? (
     <BlockSetting block={block} setProp={setProp} />
   ) : (
     <div className="form-check">
@@ -326,6 +331,89 @@ const TextStyleSelect = ({ textStyle, setProp }) => {
     </select>
   );
 };
+const textStyleToArray = (textStyle) =>
+  Array.isArray(textStyle) ? textStyle : !textStyle ? [] : [textStyle];
+
+const TextStyleSelectBtns = ({ textStyle, setProp }) => {
+  const styleArray = textStyleToArray(textStyle);
+  const clickH = (h) => {
+    const noH = styleArray.filter((s) => !(s.length == 2 && s[0] === "h"));
+    const selected = styleArray.includes(`h${h}`);
+    if (!selected) noH.push(`h${h}`);
+    setProp((prop) => (prop.textStyle = noH));
+  };
+  const clickStyle = (style) => {
+    const noH = styleArray.filter((s) => s !== style);
+    const selected = styleArray.includes(style);
+    if (!selected) noH.push(style);
+    setProp((prop) => (prop.textStyle = noH));
+  };
+  const StyleButton = ({ styleName, icon, title, size }) => (
+    <button
+      type="button"
+      title={title}
+      onClick={() => clickStyle(styleName)}
+      className={`btn btn-sm btn-${
+        !styleArray.includes(styleName) ? "outline-" : ""
+      }secondary style-${styleName}`}
+    >
+      <FontAwesomeIcon icon={icon} size={size || undefined} />
+    </button>
+  );
+
+  return (
+    <div>
+      <div className="btn-group w-100" role="group">
+        {[1, 2, 3, 4, 5, 6].map((h) => (
+          <button
+            key={h}
+            type="button"
+            title={`Heading ${h}`}
+            onClick={() => clickH(h)}
+            className={`btn btn-sm btn-${
+              !styleArray.includes(`h${h}`) ? "outline-" : ""
+            }secondary style-h${h}`}
+          >
+            H{h}
+          </button>
+        ))}
+      </div>
+      <div className="btn-group w-100" role="group">
+        <StyleButton
+          styleName="fw-bold"
+          icon={faBold}
+          title="Bold"
+        ></StyleButton>
+        <StyleButton
+          styleName="fst-italic"
+          icon={faItalic}
+          title="Italics"
+        ></StyleButton>
+        <StyleButton
+          styleName="small"
+          icon={faFont}
+          title="Small"
+          size="xs"
+        ></StyleButton>
+        <StyleButton
+          styleName="text-muted"
+          icon={faCommentSlash}
+          title="Muted"
+        ></StyleButton>
+        <StyleButton
+          styleName="text-underline"
+          icon={faUnderline}
+          title="Underline"
+        ></StyleButton>
+        <StyleButton
+          styleName="font-monospace"
+          icon={faTerminal}
+          title="Monospace"
+        ></StyleButton>
+      </div>
+    </div>
+  );
+};
 
 export /**
  * @param {object} props
@@ -357,11 +445,8 @@ export /**
 const TextStyleRow = ({ textStyle, setProp }) => {
   return (
     <tr>
-      <td>
-        <label>Text Style</label>
-      </td>
-      <td>
-        <TextStyleSelect textStyle={textStyle} setProp={setProp} />
+      <td colSpan={2}>
+        <TextStyleSelectBtns textStyle={textStyle} setProp={setProp} />
       </td>
     </tr>
   );
@@ -544,7 +629,7 @@ export /**
  * @namespace
  */
 const SelectUnits = ({ vert, autoable, ...props }) => {
-  const options = ["px", "%", vert ? "vh" : "vw", "em", "rem"];
+  const options = ["px", "%", vert ? "vh" : "vw", "em", "rem", "cm"];
   if (autoable) options.push("auto");
   return <select {...props}>{buildOptions(options)}</select>;
 };
@@ -580,7 +665,7 @@ export const parseStyles = (styles) =>
  * @param {object} styles
  * @returns {object}
  */
-export const reactifyStyles = (styles) => {
+export const reactifyStyles = (styles, transform, rotate) => {
   const toCamel = (s) => {
     return s.replace(/([-][a-z])/gi, ($1) => {
       return $1.toUpperCase().replace("-", "");
@@ -590,6 +675,17 @@ export const reactifyStyles = (styles) => {
   Object.keys(styles).forEach((k) => {
     reactified[toCamel(k)] = styles[k];
   });
+  if (transform) {
+    reactified.transform = Object.entries(transform)
+      .filter(([k, v]) => v !== "")
+      .map(([k, v]) => `${k}(${v})`)
+      .join(" ");
+  }
+  if (rotate) {
+    if (!reactified.transform) reactified.transform = `rotate(${rotate}deg)`;
+    else reactified.transform = `${reactified.transform} rotate(${rotate}deg)`;
+  }
+
   return reactified;
 };
 
@@ -745,6 +841,8 @@ const ConfigField = ({
   props,
   setter,
   isStyle,
+  subProp,
+  valuePostfix,
 }) => {
   /**
    * @param {object} v
@@ -752,7 +850,8 @@ const ConfigField = ({
    */
   const options = React.useContext(optionsCtx);
 
-  const myOnChange = (v) => {
+  const myOnChange = (v0) => {
+    const v = valuePostfix && (v0 || v0 === 0) ? v0 + valuePostfix : v0;
     setProp((prop) => {
       if (setter) setter(prop, field.name, v);
       else if (configuration) {
@@ -761,18 +860,25 @@ const ConfigField = ({
       } else if (isStyle) {
         if (!prop.style) prop.style = {};
         prop.style[field.name] = v;
+      } else if (subProp) {
+        if (!prop[subProp]) prop[subProp] = {};
+        prop[subProp][field.name] = v;
       } else prop[field.name] = v;
     });
     onChange && onChange(field.name, v, setProp);
   };
-  const value = or_if_undef(
+  let value = or_if_undef(
     configuration
       ? configuration[field.name]
       : isStyle
       ? props.style[field.name]
+      : subProp
+      ? props[subProp]?.[field.name]
       : props[field.name],
     field.default
   );
+  if (valuePostfix)
+    value = `${value}`.replaceAll(valuePostfix || "__nosuchstring", "");
   if (field.input_type === "fromtype") field.input_type = null;
   if (
     field.type &&
@@ -811,7 +917,7 @@ const ConfigField = ({
         const options = getOptions();
         return (
           <select
-            className="form-control form-select"
+            className={`field-${field?.name} form-control form-select`}
             value={value || ""}
             onChange={(e) => e.target && myOnChange(e.target.value)}
             onBlur={(e) => e.target && myOnChange(e.target.value)}
@@ -830,7 +936,7 @@ const ConfigField = ({
         return (
           <input
             type="text"
-            className="form-control"
+            className={`field-${field?.name} form-control`}
             value={value || ""}
             onChange={(e) => e.target && myOnChange(e.target.value)}
           />
@@ -838,7 +944,7 @@ const ConfigField = ({
     },
     Font: () => (
       <select
-        className="form-control form-select"
+        className="fontselect form-control form-select"
         value={value || ""}
         onChange={(e) => e.target && myOnChange(e.target.value)}
         onBlur={(e) => e.target && myOnChange(e.target.value)}
@@ -856,7 +962,7 @@ const ConfigField = ({
     Integer: () => (
       <input
         type="number"
-        className="form-control"
+        className={`field-${field?.name} form-control`}
         step={field.step || 1}
         min={field.min}
         max={field.max}
@@ -867,7 +973,7 @@ const ConfigField = ({
     Float: () => (
       <input
         type="number"
-        className="form-control"
+        className={`field-${field?.name} form-control`}
         value={value || ""}
         step={0.01}
         onChange={(e) => e.target && myOnChange(e.target.value)}
@@ -878,7 +984,7 @@ const ConfigField = ({
       <div className="form-check">
         <input
           type="checkbox"
-          className="form-check-input"
+          className={`field-${field?.name} form-check-input`}
           checked={value}
           onChange={(e) => e.target && myOnChange(e.target.checked)}
         />
@@ -889,7 +995,7 @@ const ConfigField = ({
       <textarea
         rows="6"
         type="text"
-        className="form-control"
+        className={`field-${field?.name} form-control`}
         value={value}
         onChange={(e) => e.target && myOnChange(e.target.value)}
       />
@@ -898,7 +1004,7 @@ const ConfigField = ({
       <textarea
         rows="6"
         type="text"
-        className="form-control"
+        className={`field-${field?.name} form-control`}
         value={value}
         onChange={(e) => e.target && myOnChange(e.target.value)}
         spellCheck={false}
@@ -934,7 +1040,7 @@ const ConfigField = ({
       } else
         return (
           <select
-            className="form-control form-select"
+            className={`field-${field?.name} form-control form-select`}
             value={value || ""}
             onChange={(e) => e.target && myOnChange(e.target.value)}
             onBlur={(e) => e.target && myOnChange(e.target.value)}
@@ -963,7 +1069,7 @@ const ConfigField = ({
             title={o.title || o.value}
             type="button"
             style={{ width: `${Math.floor(100 / field.options.length)}%` }}
-            className={`btn btn-sm btn-${
+            className={`field-${field?.name} btn btn-sm btn-${
               value !== o.value ? "outline-" : ""
             }secondary ${field.btnClass || ""}`}
             onClick={() => myOnChange(o.value)}
@@ -978,7 +1084,7 @@ const ConfigField = ({
       if (isStyle && value === "auto") {
         styleVal = "";
         styleDim = "auto";
-      } else if (isStyle && value && typeof value === "string") {
+      } else if ((isStyle || subProp) && value && typeof value === "string") {
         const matches = value.match(/^([-]?[0-9]+\.?[0-9]*)(.*)/);
         if (matches) {
           styleVal = matches[1];
@@ -990,13 +1096,13 @@ const ConfigField = ({
           {styleDim !== "auto" && (
             <input
               type="number"
-              value={(isStyle ? styleVal : value) || ""}
-              className="w-50 form-control-sm d-inline dimunit"
+              value={(isStyle || subProp ? styleVal : value) || ""}
+              className={`field-${field?.name} w-50 form-control-sm d-inline dimunit`}
               disabled={field.autoable && styleDim === "auto"}
               onChange={(e) =>
                 e?.target &&
                 myOnChange(
-                  isStyle
+                  isStyle || subProp
                     ? `${e.target.value}${styleDim || "px"}`
                     : e.target.value
                 )
@@ -1007,13 +1113,13 @@ const ConfigField = ({
             value={or_if_undef(
               configuration
                 ? configuration[field.name + "Unit"]
-                : isStyle
+                : isStyle || subProp
                 ? styleDim
                 : props[field.name + "Unit"],
               "px"
             )}
             autoable={field.autoable}
-            className={`w-${
+            className={`field-${field?.name} w-${
               styleDim === "auto" ? 100 : 50
             } form-control-sm d-inline dimunit`}
             vert={!field.horiz}
@@ -1032,6 +1138,13 @@ const ConfigField = ({
                     myStyleVal,
                     0
                   )}${target_value}`;
+                }
+                if (subProp) {
+                  if (!prop[subProp]) prop[subProp] = {};
+                  prop[subProp][field.name] = `${or_if_undef(
+                    myStyleVal,
+                    0
+                  )}${target_value}`;
                 } else prop[field.name + "Unit"] = target_value;
               });
             }}
@@ -1128,7 +1241,15 @@ export /**
  * @subcategory components / elements / utils
  * @namespace
  */
-const SettingsRow = ({ field, node, setProp, onChange, isStyle }) => {
+const SettingsRow = ({
+  field,
+  node,
+  setProp,
+  onChange,
+  isStyle,
+  subProp,
+  valuePostfix,
+}) => {
   const fullWidth = ["String", "Bool", "textarea"].includes(field.type);
   const needLabel = field.type !== "Bool";
   const inner = field.canBeFormula ? (
@@ -1151,6 +1272,8 @@ const SettingsRow = ({ field, node, setProp, onChange, isStyle }) => {
       setProp={setProp}
       onChange={onChange}
       isStyle={isStyle}
+      subProp={subProp}
+      valuePostfix={valuePostfix}
     />
   );
   return (
@@ -1265,6 +1388,7 @@ const ButtonOrLinkSettingsRows = ({
   linkFirst = false,
   linkIsBlank = false,
   allowRunOnLoad = false,
+  faIcons = [],
 }) => {
   const setAProp = setAPropGen(setProp);
   const addBtnClass = (s) => (btnClass ? `${btnClass} ${s}` : s);
@@ -1353,7 +1477,7 @@ const ButtonOrLinkSettingsRows = ({
               setProp((prop) => (prop[keyPrefix + "icon"] = value))
             }
             isMulti={false}
-            icons={faIcons}
+            icons={faIcons || []}
           />
         </td>
       </tr>
@@ -1441,47 +1565,11 @@ export const bstyleopt = (style) => ({
 export const rand_ident = () =>
   Math.floor(Math.random() * 16777215).toString(16);
 
-export const recursivelyCloneToElems = (query) => (nodeId, ix) => {
-  const { data } = query.node(nodeId).get();
-  const { type, props, nodes } = data;
-  const newProps = { ...props };
-  if (newProps.rndid) {
-    newProps.rndid = rand_ident();
-  }
-  const children = (nodes || []).map(recursivelyCloneToElems(query));
-  if (data.displayName === "Columns") {
-    const cols = ntimes(data.props.ncols, (ix) =>
-      recursivelyCloneToElems(query)(data.linkedNodes["Col" + ix])
-    );
-    return React.createElement(Columns, {
-      ...newProps,
-      ...(typeof ix !== "undefined" ? { key: ix } : {}),
-      contents: cols,
-    });
-  }
-  if (data.isCanvas)
-    return React.createElement(
-      Element,
-      {
-        ...newProps,
-        canvas: true,
-        is: type,
-        ...(typeof ix !== "undefined" ? { key: ix } : {}),
-      },
-      children
-    );
-  return React.createElement(
-    type,
-    {
-      ...newProps,
-      ...(typeof ix !== "undefined" ? { key: ix } : {}),
-    },
-    children
-  );
-};
-
 export const isBlock = (block, inline, textStyle) =>
-  !textStyle || !textStyle.startsWith("h") ? block : !inline;
+  !textStyle ||
+  !textStyleToArray(textStyle).some((ts) => ts && ts.startsWith("h"))
+    ? block
+    : !inline;
 
 export const setAPropGen =
   (setProp) =>

package/src/components/storage.js

@@ -246,6 +246,7 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT", options) => {
           imgResponsiveWidths={segment.imgResponsiveWidths}
           bgType={segment.bgType || "None"}
           style={segment.style || {}}
+          transform={segment.transform || {}}
           bgColor={segment.bgColor || "#ffffff"}
           setTextColor={!!segment.setTextColor}
           textColor={segment.textColor || "#000000"}
@@ -541,6 +542,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
           click_action: node.props.click_action,
           rotate: node.props.rotate,
           style: node.props.style,
+          transform: node.props.transform,
           ...customProps,
         };
       else return get_nodes(node);

package/webpack.config.js

@@ -1,5 +1,5 @@
 const path = require("path");
-
+const webpack = require('webpack')
 module.exports = {
   module: {
     rules: [
@@ -18,4 +18,10 @@ module.exports = {
     //libraryTarget: 'window',
     //libraryExport: 'default'
   },
+  plugins: [
+    // fix "process is not defined" error:
+    new webpack.ProvidePlugin({
+      process: 'process/browser',
+    }),
+  ]
 };