@saltcorn/builder 1.6.0-beta.9 → 1.6.0-rc.2

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}

package/src/components/elements/utils.js

@@ -707,7 +707,8 @@ const fetchPreview = ({ url, body, options, setPreviews, node_id, isView }) => {
       else return "";
     })
     .then(function (html) {
-      $(".preview-scratchpad").html(html);
+      const scratchpad = document.querySelector(".preview-scratchpad");
+      if (scratchpad) scratchpad.innerHTML = html;
       $(".preview-scratchpad").find("iframe").css("pointer-events", "none");
       $(".preview-scratchpad").find("a").attr("href", "#");
       $(".preview-scratchpad")
@@ -936,7 +937,7 @@ const ColorInput = ({ value, onChange }) =>
     </button>
   );
 
-const CodeFieldWithModal = ({ value, onChange, setProp, mode, label, hideLabel }) => {
+const CodeFieldWithModal = ({ value, onChange, setProp, mode, label, hideLabel, placeholder, nojoins }) => {
   const [modalOpen, setModalOpen] = useState(false);
   const { t } = useTranslation();
   return (
@@ -965,6 +966,8 @@ const CodeFieldWithModal = ({ value, onChange, setProp, mode, label, hideLabel }
         value={value}
         onChange={onChange}
         mode={mode}
+        placeholder={placeholder}
+        nojoins={nojoins}
       />
       {modalOpen ? (
         <div
@@ -1052,15 +1055,17 @@ const ConfigForm = ({
       if (f.showIf && configuration) {
         let noshow = false;
         Object.entries(f.showIf).forEach(([nm, value]) => {
+          const cfgVal = configuration[nm];
+          const effectiveVal = cfgVal === undefined ? false : cfgVal;
           if (Array.isArray(value))
-            noshow = noshow || !value.includes(configuration[nm]);
-          else noshow = noshow || value !== configuration[nm];
+            noshow = noshow || !value.includes(effectiveVal);
+          else noshow = noshow || value !== effectiveVal;
         });
         if (noshow) return null;
       }
       return (
         <div key={ix} className="builder-config-field" data-field-name={f.name}>
-          {!isCheckbox(f) && f.input_type !== "code" ? (
+          {!isCheckbox(f) && (f.input_type !== "code" || f.attributes?.singleline) ? (
             <label>
               {f.label || f.name}
               {f.help ? (
@@ -1326,19 +1331,11 @@ const ConfigField = ({
       />
     ),
     code: () => {
-      if (
-        field?.attributes?.expression_type === "row" ||
-        field?.attributes?.expression_type === "query"
-      ) {
+      if (field?.attributes?.singleline) {
         return (
-          <textarea
-            rows="6"
-            type="text"
-            className={`field-${field?.name} form-control`}
-            value={value}
-            name={field?.name}
-            onChange={(e) => e.target && myOnChange(e.target.value)}
-            spellCheck={false}
+          <SingleLineEditor
+            value={value || ""}
+            onChange={myOnChange}
           />
         );
       }
@@ -1349,6 +1346,8 @@ const ConfigField = ({
           setProp={setProp}
           mode={field?.attributes?.mode}
           label={field?.label || field?.name || "Code"}
+          placeholder={field?.attributes?.placeholder}
+          nojoins={field?.attributes?.nojoins}
         />
       );
     },
@@ -1382,31 +1381,40 @@ const ConfigField = ({
             styles={reactSelectStyles()}
           ></Select>
         );
-      } else
+      } else {
+        const explainerText = field.attributes?.explainers?.[value || ""];
         return (
-          <select
-            className={`field-${field?.name} form-control form-select`}
-            value={value || ""}
-            name={field?.name}
-            onChange={(e) => e.target && myOnChange(e.target.value)}
-            onBlur={(e) => e.target && myOnChange(e.target.value)}
-            data-fieldname={field?.name}
-          >
-            {(field.options || []).map((o, ix) =>
-              o.name && o.label ? (
-                <option key={ix} value={o.name}>
-                  {o.label}
-                </option>
-              ) : o.value && o.label ? (
-                <option key={ix} value={o.value}>
-                  {o.label}
-                </option>
-              ) : (
-                <option key={ix}>{o}</option>
-              )
+          <Fragment>
+            <select
+              className={`field-${field?.name} form-control form-select`}
+              value={value || ""}
+              name={field?.name}
+              onChange={(e) => e.target && myOnChange(e.target.value)}
+              onBlur={(e) => e.target && myOnChange(e.target.value)}
+              data-fieldname={field?.name}
+            >
+              {(field.options || []).map((o, ix) =>
+                o.name && o.label ? (
+                  <option key={ix} value={o.name}>
+                    {o.label}
+                  </option>
+                ) : o.value && o.label ? (
+                  <option key={ix} value={o.value}>
+                    {o.label}
+                  </option>
+                ) : (
+                  <option key={ix}>{o}</option>
+                )
+              )}
+            </select>
+            {explainerText && (
+              <div className="alert alert-info py-1 px-2 my-1 small">
+                <strong>{value}</strong>: {explainerText}
+              </div>
             )}
-          </select>
+          </Fragment>
         );
+      }
     },
     btn_select: () => (
       <div className="btn-group w-100" role="group">
@@ -1543,9 +1551,11 @@ const SettingsFromFields =
             if (f.showIf) {
               let noshow = false;
               Object.entries(f.showIf).forEach(([nm, value]) => {
+                const cfgVal = node[nm];
+                const effectiveVal = cfgVal === undefined ? false : cfgVal;
                 if (Array.isArray(value))
-                  noshow = noshow || !value.includes(node[nm]);
-                else noshow = noshow || value !== node[nm];
+                  noshow = noshow || !value.includes(effectiveVal);
+                else noshow = noshow || value !== effectiveVal;
               });
               if (noshow) return null;
             }
@@ -1630,7 +1640,7 @@ const SettingsRow = ({
     <tr>
       {fullWidth ? (
         <td colSpan="2">
-          {needLabel && field.input_type !== "code" && <label>{field.label}</label>}
+          {needLabel && (field.input_type !== "code" || field.attributes?.singleline) && <label>{field.label}</label>}
           {inner}
           {field.sublabel ? (
             <i

package/src/components/storage.js

@@ -152,7 +152,7 @@ const layoutToNodes = (
         }
       });
       if (related.fields.some((f) => f.canBeFormula))
-        props.isFormula = segment.isFormula;
+        props.isFormula = segment.isFormula ?? {};
       if (related.hasContents)
         return (
           <Element