@saltcorn/builder 1.7.0-alpha.0 → 1.7.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "1.7.0-alpha.0",
+  "version": "1.7.0-beta.0",
   "description": "Drag and drop view builder for Saltcorn, open-source no-code platform",
   "main": "index.js",
   "homepage": "https://saltcorn.com",
@@ -30,7 +30,7 @@
     "@fortawesome/free-solid-svg-icons": "5.15.2",
     "@fortawesome/react-fontawesome": "0.1.14",
     "@monaco-editor/react": "4.7.0",
-    "@saltcorn/common-code": "1.7.0-alpha.0",
+    "@saltcorn/common-code": "1.7.0-beta.0",
     "@tippyjs/react": "4.2.6",
     "babel-loader": "9.2.1",
     "ckeditor4-react": "2.0.0",
@@ -40,6 +40,7 @@
     "jsdom": "26.0.0",
     "lodash": "4.17.21",
     "monaco-editor": "^0.52.2",
+    "process": "0.11.10",
     "prop-types": "15.8.1",
     "react": "^18.2.0",
     "react-bootstrap-icons": "1.10.3",
@@ -48,7 +49,7 @@
     "react-select": "5.8.0",
     "react-test-renderer": "18.2.0",
     "react-transition-group": "4.4.5",
-    "webpack": "^5.105.1",
+    "webpack": "5.97.1",
     "webpack-cli": "6.0.1"
   },
   "publishConfig": {

package/src/components/Builder.js

@@ -42,13 +42,16 @@ import {
   ToolboxPage,
   ToolboxFilter,
   ToolboxList,
+  ToolboxRoom,
 } from "./Toolbox";
-import { craftToSaltcorn, layoutToNodes } from "./storage";
+import { craftToSaltcorn, layoutToNodes, resolveLibraryRefs } from "./storage";
 import { Card } from "./elements/Card";
 import { Link } from "./elements/Link";
 import { View } from "./elements/View";
 import { Container } from "./elements/Container";
 import { Column } from "./elements/Column";
+import { LibraryInstance } from "./elements/LibraryInstance";
+import { LibrarySlotInstance } from "./elements/LibrarySlotInstance";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faCopy,
@@ -65,12 +68,14 @@ import {
 } from "@fortawesome/free-regular-svg-icons";
 import { Accordion, ErrorBoundary } from "./elements/utils";
 import { Display, Tablet, Phone } from "react-bootstrap-icons";
-import { InitNewElement, Library, LibraryElem } from "./Library";
+import { InitNewElement, Library, LibraryElem, LibrarySlotElem, hydratingRef } from "./Library";
 import { RenderNode } from "./RenderNode";
 import { ListColumn } from "./elements/ListColumn";
 import { ListColumns } from "./elements/ListColumns";
 import { Prompt } from "./elements/Prompt";
 import { recursivelyCloneToElems } from "./elements/Clone";
+import { MessageList } from "./elements/MessageList";
+import { MessageForm } from "./elements/MessageForm";
 import { Page } from "./elements/Page";
 import CustomLayer from "./elements/CustomLayer";
 
@@ -786,18 +791,43 @@ const NextButton = ({ layout }) => {
   const options = useContext(optionsCtx);
 
   useEffect(() => {
-    layoutToNodes(layout, query, actions.history.ignore(), "ROOT", options);
+    (async () => {
+      hydratingRef.current = true;
+      try {
+        await resolveLibraryRefs(layout, options);
+        layoutToNodes(layout, query, actions.history.ignore(), "ROOT", options);
+      } finally {
+        hydratingRef.current = false;
+      }
+    })();
   }, []);
 
   /**
    * @returns {void}
    */
   const onClick = () => {
-    const { columns, layout } = craftToSaltcorn(
+    const { columns, layout, libraryUpdates } = craftToSaltcorn(
       JSON.parse(query.serialize()),
       "ROOT",
       options
     );
+    if (libraryUpdates?.length) {
+      // fire-and-forget with keepalive - the form submits right after
+      fetch(`/library/save-updates`, {
+        method: "POST",
+        keepalive: true,
+        headers: {
+          "Content-Type": "application/json",
+          "CSRF-Token": options.csrfToken,
+        },
+        body: JSON.stringify({ libraryUpdates }),
+      }).catch(() => {
+        window.notifyAlert({
+          type: "danger",
+          text: "Unable to save shared component changes",
+        });
+      });
+    }
     document
       .querySelector("form#scbuildform input[name=columns]")
       .setAttribute("value", encodeURIComponent(JSON.stringify(columns)));
@@ -949,8 +979,13 @@ const Builder = ({ options, layout, mode }) => {
           ListColumn,
           ListColumns,
           LibraryElem,
+          LibraryInstance,
+          LibrarySlotElem,
+          LibrarySlotInstance,
           Prompt,
-          Page
+          Page,
+          MessageList,
+          MessageForm
         }}
       >
         <Provider value={options}>
@@ -991,6 +1026,7 @@ const Builder = ({ options, layout, mode }) => {
                             edit: <ToolboxEdit expanded={isLeftEnlarged} />,
                             page: <ToolboxPage expanded={isLeftEnlarged} />,
                             filter: <ToolboxFilter expanded={isLeftEnlarged} />,
+                            room: <ToolboxRoom expanded={isLeftEnlarged} />,
                           }[mode] || <div>{t("Missing mode")}</div>}
                         </div>
                         <div accordiontitle={t("Library")}>

package/src/components/Library.js

@@ -17,10 +17,18 @@ import { useEditor, useNode } from "@craftjs/core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPlus, faTimes } from "@fortawesome/free-solid-svg-icons";
 import FontIconPicker from "@fonticonpicker/react-fonticonpicker";
-import { craftToSaltcorn, layoutToNodes } from "./storage";
+import { craftToSaltcorn, layoutToNodes, resolveLibraryRefs } from "./storage";
 import optionsCtx from "./context";
 import { WrapElem } from "./Toolbox";
 import { isEqual, throttle, chunk } from "lodash";
+import { LibraryInstance } from "./elements/LibraryInstance";
+import { LibrarySlotInstance } from "./elements/LibrarySlotInstance";
+import { ErrorBoundary } from "./elements/utils";
+import { rand_ident } from "./elements/utils";
+
+// true while loading a saved layout into the canvas, so nothing gets
+// accidentally auto-selected along the way
+export const hydratingRef = { current: false };
 
 const getSelectedNodes = (selected) => {
   if (!selected) return [];
@@ -64,6 +72,39 @@ LibraryElem.craft = {
   displayName: "LibraryElem",
 };
 
+export /**
+ * A draggable placeholder for a new slot inside a shared component -
+ * dropped in while building a component, not while placing one.
+ * @returns {Fraggment}
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
+const LibrarySlotElem = () => {
+  const {
+    selected,
+    connectors: { connect, drag },
+  } = useNode((node) => ({ selected: node.events.selected }));
+  return (
+    <Fragment>
+      <span
+        className={selected ? "selected-node" : ""}
+        ref={(dom) => connect(drag(dom))}
+      >
+        Slot
+      </span>
+      <br />
+    </Fragment>
+  );
+};
+
+/**
+ * @type {object}
+ */
+LibrarySlotElem.craft = {
+  displayName: "LibrarySlotElem",
+};
+
 // https://www.developerway.com/posts/debouncing-in-react
 const useThrottle = (callback) => {
   const ref = useRef();
@@ -84,6 +125,8 @@ const useThrottle = (callback) => {
 };
 
 export /**
+ * Renders nothing - just wires up autosave and turns a freshly dropped
+ * library item into a real linked instance.
  * @param {object} props
  * @param {object} props.nodekeys
  * @returns {object[]}
@@ -92,7 +135,6 @@ export /**
  * @namespace
  */
 const InitNewElement = ({ nodekeys, savingState, setSavingState }) => {
-  const [saveTimeout, setSaveTimeout] = useState(false);
   const savedData = useRef(false);
   const { actions, query, connectors } = useEditor((state, query) => {
     return {};
@@ -131,6 +173,7 @@ const InitNewElement = ({ nodekeys, savingState, setSavingState }) => {
 
     try {
       rebuildInProgress.current = true;
+      hydratingRef.current = true;
       savedData.current = JSON.stringify(layout);
       actions.selectNode();
       query
@@ -139,11 +182,13 @@ const InitNewElement = ({ nodekeys, savingState, setSavingState }) => {
         .forEach((child) => {
           actions.delete(child);
         });
+      await resolveLibraryRefs(layout, options);
       layoutToNodes(layout, query, actions.history.ignore(), "ROOT", options);
     } catch (e) {
       console.error("rebuild error", e);
     } finally {
       rebuildInProgress.current = false;
+      hydratingRef.current = false;
     }
   };
 
@@ -170,6 +215,14 @@ const InitNewElement = ({ nodekeys, savingState, setSavingState }) => {
     };
   }, [handlePageShow]);
 
+  // is id (or a child of it) selected? checked via Craft.js, since editing
+  // happens in the settings panel, not the canvas DOM
+  const isNodeSelected = (id) => {
+    const selectedIds = query.getEvent("selected").all();
+    const within = query.node(id).descendants(true);
+    return selectedIds.some((sid) => within.includes(sid));
+  };
+
   const doSave = (query, keepalive) => {
     if (!query.serialize) return;
     if (rebuildInProgress.current) return;
@@ -179,16 +232,32 @@ const InitNewElement = ({ nodekeys, savingState, setSavingState }) => {
       options
     );
     const urlroot = options.page_id ? "pageedit" : "viewedit";
+    // also compare libraryUpdates - editing a shared component doesn't
+    // change this page's own layout, but still needs saving
+    const comparable = JSON.stringify({
+      layout: data.layout,
+      libraryUpdates: data.libraryUpdates,
+    });
     if (savedData.current === false) {
       //do not save on first call
-      savedData.current = JSON.stringify(data.layout);
+      savedData.current = comparable;
 
       return;
     }
-    if (isEqual(savedData.current, JSON.stringify(data.layout))) return;
-    savedData.current = JSON.stringify(data.layout);
+    if (isEqual(savedData.current, comparable)) return;
+    savedData.current = comparable;
     setSavingState({ isSaving: true });
 
+    // dedupe by library_id, preferring the selected placement, so an
+    // untouched duplicate can't overwrite the one being edited
+    const byLibraryId = {};
+    (data.libraryUpdates || []).forEach((u) => {
+      const existing = byLibraryId[u.library_id];
+      if (!existing || (u.node_id && isNodeSelected(u.node_id)))
+        byLibraryId[u.library_id] = u;
+    });
+    const libraryUpdates = Object.values(byLibraryId);
+
     fetch(`/${urlroot}/savebuilder/${options.page_id || options.view_id}`, {
       method: "POST", // or 'PUT'
       keepalive, //this is conditional bec body size is limited to 64KB
@@ -196,16 +265,22 @@ const InitNewElement = ({ nodekeys, savingState, setSavingState }) => {
         "Content-Type": "application/json",
         "CSRF-Token": options.csrfToken,
       },
-      body: JSON.stringify(data),
+      body: JSON.stringify({
+        layout: data.layout,
+        columns: data.columns,
+        libraryUpdates,
+      }),
     })
       .then((response) => {
-        response.json().then((data) => {
-          if (typeof data?.error === "string") {
+        response.json().then((respData) => {
+          if (typeof respData?.error === "string") {
             // don't log duplicates
             if (!savingState.error)
-              window.notifyAlert({ type: "danger", text: data.error });
-            setSavingState({ isSaving: false, error: data.error });
-          } else setSavingState({ isSaving: false });
+              window.notifyAlert({ type: "danger", text: respData.error });
+            setSavingState({ isSaving: false, error: respData.error });
+          } else {
+            setSavingState({ isSaving: false });
+          }
         });
       })
       .catch((e) => {
@@ -245,18 +320,72 @@ const InitNewElement = ({ nodekeys, savingState, setSavingState }) => {
       const id = newNodeIds[0];
       const node = nodes[id];
       if (node.displayName === "LibraryElem") {
-        const layout = node.props.layout;
-        layoutToNodes(
-          layout.layout ? layout.layout : layout,
-          query,
-          actions,
-          node.parent,
-          options
-        );
-        setTimeout(() => {
+        const parent = node.parent;
+        // fetch fresh rather than trust the sidebar's page-load snapshot -
+        // the shared component may have been edited since this page loaded
+        fetch(`/library/content/${node.props.id}`, {
+          headers: { "CSRF-Token": options.csrfToken },
+        })
+          .then((r) => r.json())
+          .then(async (lib) => {
+            if (lib.error) {
+              window.notifyAlert({ type: "danger", text: lib.error });
+              actions.delete(id);
+              return;
+            }
+            const libLayout = lib.layout?.layout ? lib.layout.layout : lib.layout || {};
+            // resolve any library references nested inside this one too,
+            // so dropping a library-in-a-library doesn't leave a gap
+            await resolveLibraryRefs(libLayout, options, new Set([lib.id]));
+            const wrapperNode = query
+              .parseReactElement(
+                <LibraryInstance
+                  library_id={lib.id}
+                  library_name={lib.name}
+                />
+              )
+              .toNodeTree();
+            actions.addNodeTree(wrapperNode, parent);
+            layoutToNodes(
+              libLayout,
+              query,
+              actions,
+              wrapperNode.rootNodeId,
+              options
+            );
+            actions.delete(id);
+          });
+      } else if (node.displayName === "LibrarySlotElem") {
+        const parent = node.parent;
+        // a slot only means anything inside a shared component - reject the
+        // drop anywhere else instead of leaving an orphaned, unresolvable slot
+        const insideLibrary =
+          nodes[parent]?.displayName === LibraryInstance.craft.displayName ||
+          query
+            .node(parent)
+            .ancestors(true)
+            .some(
+              (aid) =>
+                nodes[aid]?.displayName === LibraryInstance.craft.displayName
+            );
+        if (!insideLibrary) {
+          window.notifyAlert({
+            type: "danger",
+            text: t(
+              "A slot can only be placed inside a shared component - drop it there instead"
+            ),
+          });
           actions.delete(id);
-        }, 0);
-      } else if (node.displayName !== "Column") {
+          return;
+        }
+        const wrapperNode = query
+          .parseReactElement(
+            <LibrarySlotInstance kind="field" slot_name={rand_ident()} />
+          )
+          .toNodeTree();
+        actions.addNodeTree(wrapperNode, parent);
+        actions.delete(id);
+      } else if (node.displayName !== "Column" && !hydratingRef.current) {
         actions.selectNode(id);
       }
     }
@@ -267,14 +396,14 @@ const InitNewElement = ({ nodekeys, savingState, setSavingState }) => {
     const nodes = query.getSerializedNodes();
     nodekeys.current = Object.keys(nodes);
     actions.setOptions((options) => {
-      const oldf = options.onNodesChange(
-        (options.onNodesChange = oldf
-          ? (q) => {
-              oldf(q);
-              onNodesChange(q);
-            }
-          : onNodesChange)
-      );
+      // chain onto any existing handler instead of replacing it
+      const oldf = options.onNodesChange;
+      options.onNodesChange = oldf
+        ? (q) => {
+            oldf(q);
+            onNodesChange(q);
+          }
+        : onNodesChange;
     });
   }, []);
 
@@ -288,12 +417,16 @@ export /**
  * @namespace
  */
 const Library = ({ expanded }) => {
-  const { actions, selected, selectedNodes, query, connectors } = useEditor(
-    (state, query) => ({
+  const { actions, selected, selectedNodes, query, connectors, hasLibraryInstance } =
+    useEditor((state, query) => ({
       selected: getSelectedNodes(state.events.selected)[0] || null,
       selectedNodes: getSelectedNodes(state.events.selected),
-    })
-  );
+      // a slot only means anything inside a shared component - nothing to
+      // drop it into until at least one is placed
+      hasLibraryInstance: Object.values(state.nodes).some(
+        (n) => n.data.displayName === LibraryInstance.craft.displayName
+      ),
+    }));
   const { t } = useTranslation();
   const options = useContext(optionsCtx);
   const [adding, setAdding] = useState(false);
@@ -320,65 +453,122 @@ const Library = ({ expanded }) => {
         "CSRF-Token": options.csrfToken,
       },
       body: JSON.stringify(data),
-    });
+    })
+      .then((r) => r.json())
+      .then(({ id }) => {
+        // needed so this item can be linked (fetched by id) without a
+        // page reload, same as items already loaded from the server
+        setRecent((r) => [...r, { ...data, id }]);
+        // replace what was just saved with a linked instance of it, so the
+        // spot it was saved from also stays in sync with the library from now on
+        const savedNode = query.node(nodeToSave).get();
+        const parentId = savedNode.data.parent;
+        const siblings = query.node(parentId).get().data.nodes;
+        const ix = siblings.indexOf(nodeToSave);
+        const wrapperNode = query
+          .parseReactElement(
+            <LibraryInstance library_id={id} library_name={newName} />
+          )
+          .toNodeTree();
+        actions.addNodeTree(wrapperNode, parentId, ix);
+        layoutToNodes(
+          layout.layout,
+          query,
+          actions,
+          wrapperNode.rootNodeId,
+          options
+        );
+        actions.delete(nodeToSave);
+      });
     setAdding(false);
     setIcon();
     setNewName("");
-    setRecent([...recent, data]);
   };
 
   const elemRows = chunk(
     [...(options.library || []), ...recent],
     expanded ? 3 : 2
   );
+  const canAdd = !!selected || selectedNodes.length > 0;
   return (
     <div className="builder-library">
-      <div className="dropdown">
-        <button
-          className="btn btn-sm btn-secondary dropdown-toggle mt-2"
-          type="button"
-          id="dropdownMenuButton"
-          aria-haspopup="true"
-          aria-expanded="false"
-          disabled={!selected && selectedNodes.length === 0}
-          onClick={() => setAdding(!adding)}
-        >
-          <FontAwesomeIcon icon={faPlus} className="me-1" />
-          {t("Add")}
-        </button>
+      <div className="toolbar-row mt-2">
         <div
-          className={`dropdown-menu py-3 px-4 ${adding ? "show" : ""}`}
-          aria-labelledby="dropdownMenuButton"
+          className={`dropdown d-inline-flex wrap-builder-elem align-items-center justify-content-center ${
+            canAdd ? "" : "text-muted"
+          }`}
         >
-          <label>{t("Name")}</label>
-          <input
-            type="text"
-            className="form-control"
-            value={newName}
-            onChange={(e) => e?.target && setNewName(e.target.value)}
-          />
-          <br />
-          <label>{t("Icon")}</label>
-          <FontIconPicker
-            className="w-100"
-            value={icon}
-            icons={options.icons}
-            onChange={setIcon}
-            isMulti={false}
-          />
-          <button className={`btn btn-primary mt-3`} onClick={addSelected}>
-            <FontAwesomeIcon icon={faPlus} className="me-1" />
-            {t("Add")}
-          </button>
-          <button
-            className={`btn btn-outline-secondary ms-2 mt-3`}
-            onClick={() => setAdding(false)}
+          {/* the clickable square and the menu are siblings, not
+              parent/child - otherwise every click inside the menu bubbles
+              up and re-toggles this onClick, closing the menu */}
+          <div
+            className="d-inline-flex align-items-center justify-content-center w-100 h-100"
+            id="library-add-btn"
+            role="button"
+            aria-haspopup="true"
+            aria-expanded={adding}
+            onClick={() => canAdd && setAdding(!adding)}
+          >
+            <div className="inner">
+              <FontAwesomeIcon icon={faPlus} className="fa-lg" />
+            </div>
+            <label>{t("Add")}</label>
+          </div>
+          <div
+            className={`dropdown-menu py-3 px-4 ${adding ? "show" : ""}`}
+            aria-labelledby="library-add-btn"
           >
-            <FontAwesomeIcon icon={faTimes} />
-          </button>
+            <label>{t("Name")}</label>
+            <input
+              type="text"
+              className="form-control"
+              value={newName}
+              onChange={(e) => e?.target && setNewName(e.target.value)}
+            />
+            <br />
+            <label>{t("Icon")}</label>
+            {/* this picker has a stray internal callback that can throw
+                after it closes, unrelated to anything the user did - catch it
+                here so it doesn't take down the whole builder */}
+            <ErrorBoundary>
+              <FontIconPicker
+                className="w-100"
+                value={icon}
+                icons={options.icons}
+                onChange={setIcon}
+                isMulti={false}
+              />
+            </ErrorBoundary>
+            <button className={`btn btn-primary mt-3`} onClick={addSelected}>
+              <FontAwesomeIcon icon={faPlus} className="me-1" />
+              {t("Add")}
+            </button>
+            <button
+              className={`btn btn-outline-secondary ms-2 mt-3`}
+              onClick={() => setAdding(false)}
+            >
+              <FontAwesomeIcon icon={faTimes} />
+            </button>
+          </div>
         </div>
+        <WrapElem
+          connectors={connectors}
+          icon="fas fa-square"
+          label={t("Slot")}
+          disable={!hasLibraryInstance}
+          title={
+            hasLibraryInstance
+              ? undefined
+              : t("Place a shared component first - a slot goes inside one")
+          }
+        >
+          <LibrarySlotElem />
+        </WrapElem>
+      </div>
+      <div className="text-muted small border-top mt-2 pt-1">
+        {t("Saved components")}
       </div>
-      <div className="card mt-2">
+      <div className="card">
         {elemRows.map((els, ix) => (
           <div className="toolbar-row" key={ix}>
             {els.map((l, ix) => (
@@ -388,7 +578,11 @@ const Library = ({ expanded }) => {
                 icon={l.icon}
                 label={l.name}
               >
-                <LibraryElem name={l.name} layout={l.layout}></LibraryElem>
+                <LibraryElem
+                  id={l.id}
+                  name={l.name}
+                  layout={l.layout}
+                ></LibraryElem>
               </WrapElem>
             ))}
           </div>