@saltcorn/builder 1.6.0-beta.13 → 1.6.0-beta.14

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@saltcorn/builder",
-  "version": "1.6.0-beta.13",
+  "version": "1.6.0-beta.14",
   "description": "Drag and drop view builder for Saltcorn, open-source no-code platform",
   "main": "index.js",
   "homepage": "https://saltcorn.com",
   "scripts": {
     "build": "webpack --mode production",
-    "builddev": "webpack --mode none",
+    "builddev": "webpack --mode development",
     "watch": "webpack --watch --mode development",
     "test": "jest tests --runInBand",
     "tsc": "echo \"Error: no TypeScript support yet\"",
@@ -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.6.0-beta.13",
+    "@saltcorn/common-code": "1.6.0-beta.14",
     "@tippyjs/react": "4.2.6",
     "babel-jest": "^29.7.0",
     "babel-loader": "9.2.1",

package/src/components/Builder.js

@@ -282,18 +282,6 @@ const SettingsPanel = ({ isEnlarged, setIsEnlarged }) => {
           selectedNodes.forEach((nodeId) => actions.delete(nodeId));
         }
       }
-      if ((event.ctrlKey || event.metaKey) && event.keyCode == 86) {
-        navigator.clipboard.readText().then((clipText) => {
-          const layout = JSON.parse(clipText);
-          layoutToNodes(
-            layout,
-            query,
-            actions,
-            selected?.id || "ROOT",
-            options
-          );
-        });
-      }
       if ((event.ctrlKey || event.metaKey) && event.keyCode == 90) {
         // undo
         actions.history.undo();
@@ -303,6 +291,43 @@ const SettingsPanel = ({ isEnlarged, setIsEnlarged }) => {
         actions.history.redo();
       }
     }
+    if ((event.ctrlKey || event.metaKey) && event.keyCode == 86) {
+      const inputTags = ["input", "textarea", "select"];
+      if (!inputTags.includes(tagName) && !target.isContentEditable) {
+        navigator.clipboard.readText().then((clipText) => {
+          try {
+            const layout = JSON.parse(clipText);
+
+            let pasteTarget = "ROOT";
+            let pasteIndex = false;
+            try {
+              if (selected?.id && selected.id !== "ROOT") {
+                const selNode = query.node(selected.id).get();
+                const linkedNodes = selNode?.data?.linkedNodes;
+                if (linkedNodes && Object.keys(linkedNodes).length > 0) {
+                  const firstLinkedId = Object.values(linkedNodes)[0];
+                  pasteTarget = firstLinkedId;
+                  pasteIndex = query.node(firstLinkedId).childNodes().length;
+                } else if (selNode?.data?.isCanvas) {
+                  pasteTarget = selected.id;
+                  pasteIndex = query.node(selected.id).childNodes().length;
+                } else {
+                  const parentId = selNode?.data?.parent;
+                  if (parentId) {
+                    pasteTarget = parentId;
+                    const siblings = query.node(parentId).childNodes();
+                    const sibIx = siblings.findIndex((sib) => sib === selected.id);
+                    if (sibIx !== -1) pasteIndex = sibIx + 1;
+                  }
+                }
+              }
+            } catch (_) {}
+            layoutToNodes(layout, query, actions, pasteTarget, options, pasteIndex);
+          } catch (e) {
+          }
+        });
+      }
+    }
     if ((tagName === "body" || tagName === "button") &&
         (event.ctrlKey || event.metaKey) && event.keyCode == 65) {
       event.preventDefault();
@@ -318,6 +343,7 @@ const SettingsPanel = ({ isEnlarged, setIsEnlarged }) => {
       window.removeEventListener("keydown", handleUserKeyPress);
     };
   }, [handleUserKeyPress]);
+
   const hasChildren =
     selected && selected.children && selected.children.length > 0;
 
@@ -726,15 +752,6 @@ const HistoryPanel = () => {
   return (
     <div className="d-flex gap-1">
       <button
-        className="btn btn-sm btn-secondary redo-builder"
-        title={t("Redo")}
-        onClick={() => actions.history.redo()}
-        disabled={!canRedo}
-        style={!canRedo ? { opacity: 0.4, pointerEvents: "none" } : {}}
-      >
-        <FontAwesomeIcon icon={faRedo} />
-      </button>
-       <button
         className="btn btn-sm btn-secondary undo-builder"
         title={t("Undo")}
         onClick={() => actions.history.undo()}
@@ -743,6 +760,15 @@ const HistoryPanel = () => {
       >
         <FontAwesomeIcon icon={faUndo} />
       </button>
+      <button
+        className="btn btn-sm btn-secondary redo-builder"
+        title={t("Redo")}
+        onClick={() => actions.history.redo()}
+        disabled={!canRedo}
+        style={!canRedo ? { opacity: 0.4, pointerEvents: "none" } : {}}
+      >
+        <FontAwesomeIcon icon={faRedo} />
+      </button>
     </div>
   );
 };
@@ -824,6 +850,61 @@ const Builder = ({ options, layout, mode }) => {
      setBuilderTop(rect.top);
    });
 
+  // Correct the CraftJS drop indicator position when body CSS zoom is applied.
+  // getBoundingClientRect() returns visual (zoomed) coords, but position:fixed
+  // top values inside a zoomed body are in layout (pre-zoom) coords, so we
+  // divide top/height by zoom. Left/width are already in viewport coords.
+  useEffect(() => {
+    const getBodyZoom = () => {
+      const bw = document.body.offsetWidth;
+      if (!bw) return 1;
+      return document.body.getBoundingClientRect().width / bw || 1;
+    };
+
+    let isCorrecting = false;
+
+    const correctIndicator = (el) => {
+      if (isCorrecting) return;
+      const zoom = getBodyZoom();
+      if (Math.abs(zoom - 1) < 0.01) return;
+
+      isCorrecting = true;
+      const top = parseFloat(el.style.top);
+      const height = parseFloat(el.style.height);
+
+      if (!isNaN(top)) el.style.top = `${top / zoom}px`;
+      if (!isNaN(height)) el.style.height = `${height / zoom}px`;
+
+      setTimeout(() => { isCorrecting = false; }, 0);
+    };
+
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === "attributes" && mutation.attributeName === "style") {
+          const el = mutation.target;
+          if (el.classList && el.classList.contains("builder-drop-indicator")) {
+            correctIndicator(el);
+          }
+        } else if (mutation.type === "childList") {
+          mutation.addedNodes.forEach((node) => {
+            if (node.nodeType === 1 && node.classList && node.classList.contains("builder-drop-indicator")) {
+              correctIndicator(node);
+            }
+          });
+        }
+      }
+    });
+
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["style"],
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
   const canvasHeight =
     Math.max(windowHeight - builderTop, builderHeight, 600) - 10;
 

package/src/components/Library.js

@@ -99,9 +99,80 @@ const InitNewElement = ({ nodekeys, savingState, setSavingState }) => {
   });
   const { t } = useTranslation();
   const options = useContext(optionsCtx);
-  const doSave = (query, keepalive) => {
+
+  const lastReload = useRef(null);
+  const rebuildInProgress = useRef(false);
+
+  const reloadEntityContentFromServer = async () => {
     if (!query.serialize) return;
+    if (lastReload.current && new Date() - lastReload.current < 1000) return;
+    lastReload.current = new Date();
+
+    const urlroot = options.page_id ? "pageedit" : "viewedit";
+    const response = await fetch(
+      `/${urlroot}/getlayout/${options.page_id || options.view_id}`
+    );
+    const { layout } = await response.json();
+
+    if (!layout) return;
+
+    const data = craftToSaltcorn(
+      JSON.parse(query.serialize()),
+      "ROOT",
+      options
+    );
+    if (
+      isEqual(
+        JSON.parse(JSON.stringify(layout)),
+        JSON.parse(JSON.stringify(data.layout))
+      )
+    )
+      return;
+
+    try {
+      rebuildInProgress.current = true;
+      savedData.current = JSON.stringify(layout);
+      actions.selectNode();
+      query
+        .node("ROOT")
+        .childNodes()
+        .forEach((child) => {
+          actions.delete(child);
+        });
+      layoutToNodes(layout, query, actions.history.ignore(), "ROOT", options);
+    } catch (e) {
+      console.error("rebuild error", e);
+    } finally {
+      rebuildInProgress.current = false;
+    }
+  };
+
+  const handleVisibilityChange = () => {
+    if (document.hidden === false) reloadEntityContentFromServer();
+  };
+
+  const handlePageShow = (event) => {
+    if (event.persisted || window.performance?.navigation.type === 2)
+      reloadEntityContentFromServer();
+  };
+
+  useEffect(() => {
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [handleVisibilityChange]);
+
+  useEffect(() => {
+    window.addEventListener("pageshow", handlePageShow);
+    return () => {
+      document.removeEventListener("pageshow", handlePageShow);
+    };
+  }, [handlePageShow]);
 
+  const doSave = (query, keepalive) => {
+    if (!query.serialize) return;
+    if (rebuildInProgress.current) return;
     const data = craftToSaltcorn(
       JSON.parse(query.serialize()),
       "ROOT",
@@ -120,7 +191,7 @@ const InitNewElement = ({ nodekeys, savingState, setSavingState }) => {
 
     fetch(`/${urlroot}/savebuilder/${options.page_id || options.view_id}`, {
       method: "POST", // or 'PUT'
-      keepalive,//this is conditional bec body size is limited to 64KB
+      keepalive, //this is conditional bec body size is limited to 64KB
       headers: {
         "Content-Type": "application/json",
         "CSRF-Token": options.csrfToken,
@@ -217,10 +288,12 @@ export /**
  * @namespace
  */
 const Library = ({ expanded }) => {
-  const { actions, selected, selectedNodes, query, connectors } = useEditor((state, query) => ({
-    selected: getSelectedNodes(state.events.selected)[0] || null,
-    selectedNodes: getSelectedNodes(state.events.selected),
-  }));
+  const { actions, selected, selectedNodes, query, connectors } = useEditor(
+    (state, query) => ({
+      selected: getSelectedNodes(state.events.selected)[0] || null,
+      selectedNodes: getSelectedNodes(state.events.selected),
+    })
+  );
   const { t } = useTranslation();
   const options = useContext(optionsCtx);
   const [adding, setAdding] = useState(false);

package/src/components/RenderNode.js

@@ -35,7 +35,7 @@ const RenderNode = ({ render }) => {
   const { id } = useNode();
   const options = useContext(optionsCtx);
   const { actions, query, isActive } = useEditor((state) => ({
-    isActive: state.nodes[id].events.selected,
+    isActive: state.nodes[id]?.events?.selected,
   }));
 
   const {
@@ -58,23 +58,33 @@ const RenderNode = ({ render }) => {
 
   const currentRef = useRef();
 
+  const getZoomFactor = useCallback(() => {
+    const bw = document.body.offsetWidth;
+    if (!bw) return 1;
+    const factor = document.body.getBoundingClientRect().width / bw;
+    return factor || 1;
+  }, []);
+
   const getPos = useCallback((dom) => {
+    const zoom = getZoomFactor();
     const { top, left, bottom, height, width, right } = dom
       ? dom.getBoundingClientRect()
       : { top: 0, left: 0, bottom: 0, right: 0, height: 0, width: 0 };
-    const rightPos = window.innerWidth - right;
+    const topAdj = (top > 0 ? top : bottom) / zoom;
+    const leftAdj = left / zoom;
+    const rightPos = window.innerWidth / zoom - right / zoom;
     return {
-      top: `${top > 0 ? top : bottom}px`,
-      left: `${left}px`,
+      top: `${topAdj}px`,
+      left: `${leftAdj}px`,
       right: `${rightPos}px`,
-      topn: top,
-      leftn: left,
+      topn: topAdj,
+      leftn: leftAdj,
       rightn: rightPos,
-      height,
-      width,
-      bottom,
+      height: height / zoom,
+      width: width / zoom,
+      bottom: bottom / zoom,
     };
-  }, []);
+  }, [getZoomFactor]);
 
   const scroll = useCallback(() => {
     const { current: currentDOM } = currentRef;

package/src/components/elements/Action.js

@@ -146,6 +146,7 @@ const ActionSettings = () => {
   } = node;
   const options = useContext(optionsCtx);
   const getCfgFields = (fv) => (options.actionConfigForms || {})[fv];
+  const actionDescription = (options.actionDescriptions || {})[name];
   const cfgFields = getCfgFields(name);
   const setAProp = setAPropGen(setProp);
   const use_setting_action_n =
@@ -260,6 +261,13 @@ const ActionSettings = () => {
               )}
             </td>
           </tr>
+          {actionDescription ? (
+            <tr>
+              <td colSpan="2">
+                <small className="text-muted">{actionDescription}</small>
+              </td>
+            </tr>
+          ) : null}
           {name !== "Clear" && options.mode === "filter" ? (
             <tr>
               <td>

package/src/components/elements/Aggregation.js

@@ -165,7 +165,7 @@ const AggregationSettings = () => {
               <label>
                 {options.mode === "filter"
                   ? t("Field")
-                  : t("Child table field")}
+                  : t("On field")}
               </label>
             </td>
             <td>

package/src/components/elements/Card.js

@@ -132,20 +132,20 @@ const Card = ({
       {bgType === "Image" && bgFileId && imageLocation === "Top" ? (
         <img src={`/files/serve/${bgFileId}`} className="card-img-top" />
       ) : null}
-      {title && title.length > 0 && (
-        <div className="card-header right-section">
-          {isFormula?.title ? (
+      <div className="card-header right-section">
+        {title && title.length > 0 ? (
+          isFormula?.title ? (
             <span className="font-monospace">={title}</span>
           ) : (
             title
-          )}
-           <div className='title-right'>
+          )
+        ) : null}
+        <div className="title-right">
           <Element canvas id="titleRight" is={Column}>
             {titleRight}
           </Element>
         </div>
-        </div>
-      )}
+      </div>
       <div
         className={`card-body ${noPadding ? "p-0" : ""}`}
         style={
@@ -441,9 +441,9 @@ const CardSettings = () => {
                     className="form-control-sm  form-select"
                     onChange={setAProp("imageLocation")}
                   >
-                    <option>{t("Card")}</option>
-                    <option>{t("Body")}</option>
-                    <option>{t("Top")}</option>
+                    <option value="Card">{t("Card")}</option>
+                    <option value="Body">{t("Body")}</option>
+                    <option value="Top">{t("Top")}</option>
                   </select>
                 </td>
               </tr>

package/src/components/elements/Clone.js

@@ -32,7 +32,7 @@ export const recursivelyCloneToElems = (query) => (nodeId, ix) => {
   const children = (nodes || []).map(recursivelyCloneToElems(query));
   if (data.displayName === "Columns") {
     const cols = ntimes(data.props.ncols, (ix) =>
-      recursivelyCloneToElems(query)(data.linkedNodes["Col" + ix])
+      cloneLinkedNodeChildren(query, data.linkedNodes["Col" + ix])
     );
     return React.createElement(Columns, {
       ...newProps,
@@ -42,7 +42,7 @@ export const recursivelyCloneToElems = (query) => (nodeId, ix) => {
   }
 
   if (data.displayName === "ListColumn") {
-    const col = recursivelyCloneToElems(query)(data.linkedNodes["listcol"]);
+    const col = cloneLinkedNodeChildren(query, data.linkedNodes["listcol"]);
 
     return React.createElement(ListColumn, {
       ...newProps,

package/src/components/elements/Container.js

@@ -1026,7 +1026,7 @@ const ContainerSettings = () => {
           />
         </tbody>
       </table>
-      <table className="w-100" accordiontitle={t("Show if...")}>
+      <table className="w-100" accordiontitle={showIfFormula ? t("Show if...") + " *" : t("Show if...")}>
         <tbody>
           {["show", "edit", "filter", "list"].includes(options.mode) && (
             <SettingsSectionHeaderRow title={t("Formula - show if true")} />

package/src/components/elements/CustomLayer.js

@@ -50,7 +50,7 @@ const CustomLayer = ({ children }) => {
       name = data?.name || name;
     }
 
-    // Rename linked Columns for Tabs and Table
+    // Rename linked Columns for Tabs, Table, and Card sections
     if (name === "Column" && data?.parent) {
       const parentNode = state.nodes[data.parent];
       const parentName = parentNode?.data?.displayName || parentNode?.data?.name;
@@ -68,6 +68,10 @@ const CustomLayer = ({ children }) => {
             if (match) {
               name = `R${parseInt(match[1], 10) + 1}C${parseInt(match[2], 10) + 1}`;
             }
+          } else if (parentName === "Card") {
+            if (key === "titleRight") name = "Title Right";
+            else if (key === "cardbody") name = "Body";
+            else if (key === "cardfooter") name = "Footer";
           }
         }
       }
@@ -79,14 +83,15 @@ const CustomLayer = ({ children }) => {
       (nodes && nodes.length > 0) ||
       (linkedNodes && Object.keys(linkedNodes).length > 0);
 
-    // Hide the ROOT Column and linked Columns of Card/Container
+    // Hide the ROOT Column and Container's single linked canvas (no ambiguity there).
+    // Card's linked canvases are NOT hidden — they show as "Title Right", "Body", "Footer".
     let shouldHide = false;
     if (id === "ROOT") {
       shouldHide = true;
     } else if ((data?.displayName === "Column" || data?.name === "Column") && data?.parent) {
       const parentNode = state.nodes[data.parent];
       const parentName = parentNode?.data?.displayName || parentNode?.data?.name;
-      if (parentName === "Card" || parentName === "Container") {
+      if (parentName === "Container") {
         const parentLinked = parentNode?.data?.linkedNodes;
         if (parentLinked && Object.values(parentLinked).includes(id)) {
           shouldHide = true;

package/src/components/elements/Link.js

@@ -171,14 +171,14 @@ const LinkSettings = () => {
                   });
                 }}
               >
-                <option>{t("URL")}</option>
-                {(options.pages || []).length > 0 && <option>{t("Page")}</option>}
+                <option value="URL">{t("URL")}</option>
+                {(options.pages || []).length > 0 && <option value="Page">{t("Page")}</option>}
                 {(options.views || []).length > 0 &&
                   ["page", "filter"].includes(options.mode) && (
-                    <option>{t("View")}</option>
+                    <option value="View">{t("View")}</option>
                   )}
                 {(options.page_groups || []).length > 0 && (
-                  <option>{t("Page Group")}</option>
+                  <option value="Page Group">{t("Page Group")}</option>
                 )}
               </select>
             </td>

package/src/components/elements/ListColumn.js

@@ -48,10 +48,8 @@ const ListColumn = ({
   const { actions, query, isActve } = useEditor((state) => ({}));
   const options = useContext(optionsCtx);
 
-  const {
-    data: { parent },
-  } = query.node(id).get();
-  const siblings = query.node(parent).childNodes();
+  const parent = query.node(id).get()?.data?.parent;
+  const siblings = parent ? query.node(parent).childNodes() : [];
   const nChildren = siblings.length;
   const childIx = siblings.findIndex((sib) => sib === id);
 

package/src/components/elements/MonacoEditor.js

@@ -1,7 +1,9 @@
 import React, { Fragment, useState, useEffect, useRef } from "react";
 import optionsCtx from "../context";
 
-import Editor, { useMonaco } from "@monaco-editor/react";
+import Editor, { useMonaco, loader } from "@monaco-editor/react";
+
+loader.config({ paths: { vs: "/monaco" } });
 
 export const mimeToMonacoLanguage = (mode) => {
   if (!mode) return "typescript";
@@ -21,16 +23,19 @@ export const mimeToMonacoLanguage = (mode) => {
   return map[mode] || mode;
 };
 
-const setMonacoLanguage = async (monaco, options, isStatements) => {
+const setMonacoLanguage = async (monaco, options, isStatements, nojoins) => {
   monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
     noLib: true,
     allowNonTsExtensions: true,
   });
-  if (options.setMonaco) return;
+  // Separate cache keys so nojoins and full-join contexts fetch independently
+  const cacheKey = nojoins ? "setMonacoNoJoins" : "setMonaco";
+  if (options[cacheKey]) return;
+  options[cacheKey] = true;
 
-  options.setMonaco = true;
+  const nojoinsPart = nojoins ? "&nojoins=yes" : "";
   const tsres = await fetch(
-    `/admin/ts-declares?${options.tableName ? `table=${options.tableName}` : ""}&user=yes`
+    `/admin/ts-declares?${options.tableName ? `table=${options.tableName}` : ""}&user=yes${nojoinsPart}`
   );
   const tsds = await tsres.text();
 
@@ -105,7 +110,7 @@ const setupVirtualPrefix = (editor, monaco) => {
 
 export const SingleLineEditor = React.forwardRef(
   (
-    { setProp, value, propKey, onChange, onInput, className, stateExpr },
+    { setProp, value, propKey, onChange, onInput, className, stateExpr, placeholder },
     ref
   ) => {
     const options = React.useContext(optionsCtx);
@@ -133,9 +138,22 @@ export const SingleLineEditor = React.forwardRef(
       : value;
 
     return (
-      <div ref={ref} className="form-control p-0 pt-1">
+      <div ref={ref} className="form-control p-0 pt-1" style={{ position: "relative" }}>
+        {isEmpty && !activePrefix && placeholder && (
+          <div style={{
+            position: "absolute",
+            top: "3px",
+            left: "14px",
+            color: "#999",
+            pointerEvents: "none",
+            zIndex: 1,
+            fontSize: "14px",
+            whiteSpace: "nowrap",
+          }}>
+            {placeholder}
+          </div>
+        )}
         <Editor
-          placeholder={"sdfffsd"}
           className={className || ""}
           height="22px"
           value={editorValue}
@@ -161,14 +179,14 @@ export const SingleLineEditor = React.forwardRef(
   }
 );
 
-export const MultiLineCodeEditor = ({ setProp, value, onChange, isModalEditor = false, mode }) => {
+export const MultiLineCodeEditor = ({ setProp, value, onChange, isModalEditor = false, mode, placeholder, nojoins }) => {
   const options = React.useContext(optionsCtx);
   const resolvedLanguage = mimeToMonacoLanguage(mode);
   const useTypeScriptSetup = resolvedLanguage === "typescript" || resolvedLanguage === "javascript";
 
   const handleEditorWillMount = (monaco) => {
     if (useTypeScriptSetup) {
-      setMonacoLanguage(monaco, options, true);
+      setMonacoLanguage(monaco, options, true, nojoins);
     }
   };
 
@@ -181,8 +199,24 @@ export const MultiLineCodeEditor = ({ setProp, value, onChange, isModalEditor =
     }
   };
 
+  const isEmpty = !value || value.trim() === "";
+  const resolvedPlaceholder = placeholder || "// enter code here";
+
   return (
-    <div className="form-control p-0 pt-2">
+    <div className="form-control p-0 pt-2" style={{ position: "relative" }}>
+      {isEmpty && !isModalEditor && (
+        <div style={{
+          position: "absolute",
+          top: "10px",
+          left: "14px",
+          color: "#999",
+          pointerEvents: "none",
+          zIndex: 1,
+          fontSize: "14px",
+        }}>
+          {resolvedPlaceholder}
+        </div>
+      )}
       <Editor
         height={isModalEditor ? "100%" : "150px"}
         value={value}